1 安装fis(必须先安装node和npm):npm install -g fis3 2 构建项目发布到根目录下的output:fis3 release -d ./output 项目根目录:FIS3 配置文件(默认fis-conf.js)所在的目录为项目根目录. 3 sprite的配置文件(fis-config.js)如下: fis.match('::packager', { spriter : fis.plugin('csssprites') }); fis.match('*.css', {…

为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位.在web端由于是固定的大小与left .top,所以定位起来会比较准确.简单.但是在移动端就不一样了,各种手机的屏幕大小不一样,很难做到使用sprite图然后根据background-position来定位.所以普遍的做法都是使用单张图片,然后使用background-size: cover|100%|contain来控制背景图的大小.其实这样…

天气转凉了,又开始贪恋暖暖的被窝了. 早上不想起床的时候在被窝里看了有关于雪碧图的视频. 1.使用场景 V导航条,登录框img标签多次载入,性能低 X大图banner按需加载,如果做成雪碧图一次加载就会载入比较久 X纯色背景的按钮 X动态图片 总结:1.静态图片,不随用户信息变化而改变 2.小图片,3-5k 3.加载量比较大 优点:有效减少http的请求数量,加速内容显示 缺点:1.内存缺陷:2.页面缩放有暴露风险:3.对爬虫不友好 2.实现原理 同一张背景图,改变background-posi…

移动端适配的时候,通常是用rem作为长宽单位,因此,在不同的设备下,元素的实际宽高(px)是不一样的,如果是单张图片作为为背景图片的时候,最为方便,只要设置背景图片的属性background-size:contain|conver|100%;都能够将图片盖住整个div. 其次如果用雪碧图的话,那么得将 背景图片的大小和位置改为rem单位.background-position:x.x rem  y.y rem;background-size : xxrem yyrem;此处就是将按照设计稿的px…

在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更优的解决方案是:雪碧图sprite. 所谓雪碧图就是把我们所需要的所有小图片用CSS sprite或者PS工具拼接成一张大图片,然后通过元素的background-image.background-positon属性完成图片的定位. 为此,我做了个Demo. 在学习的过程中,遇到了背景图片定位的问题,也就是b…

× 目录 [1]定义 [2]应用场景 [3]合并[4]实现[5]维护 前面的话 前面已经介绍过,描述性图片最终要合并为雪碧图.本文是photoshop巧用系列第五篇——雪碧图 定义 css雪碧图(sprite)是一种网页图片应用处理方式,它允许将一个页面涉及到的所有零星图片都包含到一张大图中.使用雪碧图的处理方式可以实现两个优点: [1]减少http请求次数 [2]减少图片大小,提升网页加载速度 (多张图片加载速度小于拼合成的图片的加载速度) 凡事都不完美,实现优点的同时也带来了缺点,即提高了网…

雪碧图(sprite)是减少请求次数的有效手段,其原理是把多张图片进行合成,使用时通过css进行定位. 1.先看一下雪碧图 没有使用雪碧图时图标是这样一个个的单独文件: 合成雪碧图后是这样拼在一起的一张图:  2.雪碧图的使用 首先确定要使用的图标的位置和大小(可以通过ps测量), 如下的雪碧图大小统一,排列规则 它们的大小均为30px*30px,第一个图标位置为0 0,第二个的位置为30px 0,依次... 样式可以这样写: 1 .box1 li:nth-child(1) { 2 width:…

本文转载自: 使用compass自动合并css雪碧图(css sprite)…

上一篇文章介绍了怎样使用compass合并雪碧图,生成的icons.css文件中单位是px,PC端可以直接在html文件中使用,但在移动端,我们需要根据不同分辨率的屏幕,来缩放图片大小,显然使用px单位肯定是不行的.所以需要做一下单位转换的工作. 移动端使用rem作为单位是最合适不过了.并不是使用了rem就可以,还需要做一些准备工作.我们都知道rem是基于html标签的font-size的,所以需要使用js动态的计算html的font-size.这里我使用淘宝的lib-flexible. 在上一…

雪碧图就是很多张小图片合并成一张大图片,以减少HTTP请求,从而提升加载速度.有很多软件可以合并雪碧图,但通常不太容易维护,使用compass生成雪碧图应该算是非常方便的方法了,可以轻松的生成雪碧图,而且易维护. 安装sass与compass 安装sass可以参考这里. 安装完sass以后,使用下面命令安装compass: > gem install compass 配置环境 进入项目目录,使用下面命令初始化项目: > compass init 该命令会在当前目录中生成一些文件: - sass…