雪碧图(sprite)是减少请求次数的有效手段，其原理是把多张图片进行合成，使用时通过css进行定位。
1.先看一下雪碧图
没有使用雪碧图时图标是这样一个个的单独文件：
合成雪碧图后是这样拼在一起的一张图：
2.雪碧图的使用
首先确定要使用的图标的位置和大小（可以通过ps测量），
如下的雪碧图大小统一，排列规则
它们的大小均为30px*30px，第一个图标位置为0 0，第二个的位置为30px 0，依次...
样式可以这样写：
排列不规则的雪碧图测量计算就不太方便了，推荐一个在线雪碧图样式工具http://tools.jb51.net/code/css_sprite
3.合成雪碧图
如果没有美工MM给我们做图，自己找来的很多零碎图标(.png)可以使用CssSprite工具进行合成。
使用较为简单，选择图片后，可以竖排或横排，也能手动调整位置；设置css中路径名及保存名称，生成雪碧图即可，可以同时生成对应的css代码。
转载请注明来源: 007办公资源网站 https://www.wode007.com