雪碧图(sprite)是减少请求次数的有效手段，其原理是把多张图片进行合成，使用时通过css进行定位。
1.先看一下雪碧图
没有使用雪碧图时图标是这样一个个的单独文件：
合成雪碧图后是这样拼在一起的一张图：
2.雪碧图的使用
首先确定要使用的图标的位置和大小（可以通过ps测量），
如下的雪碧图大小统一，排列规则
它们的大小均为30px*30px，第一个图标位置为0 0，第二个的位置为30px 0，依次...
样式可以这样写：
1 .box1 li:nth-child(1) {
2 width: 30px;
3 height: 30px;
4 background: url(./images/map-icon.png) no-repeat 0 0; /* 第一个图标*/
5 }
6
7 .box1 li:nth-child(2) {
8 width: 30px;
9 height: 30px;
10 background: url(./images/map-icon.png) no-repeat -30px 0; /* 第二个图标*/
11 }
12
13 .box1 li:nth-child(3) {
14 width: 30px;
15 height: 30px;
16 background: url(./images/map-icon.png) no-repeat -60px 0; /* 第三个图标*/
17 }排列不规则的雪碧图测量计算就不太方便了，推荐一个在线雪碧图样式工具http://tools.jb51.net/code/css_sprite
3.合成雪碧图
如果没有美工MM给我们做图，自己找来的很多零碎图标(.png)可以使用CssSprite工具进行合成。
使用较为简单，选择图片后，可以竖排或横排，也能手动调整位置；设置css中路径名及保存名称，生成雪碧图即可，可以同时生成对应的css代码。
多个图标图片（雪碧图）使用CSS样式显示
现在的网页中显示很多图标算是常态，发现项目中页面上用到的图标都是单个图标单个文件，用的时候直接往页面上挂，这确实很常态。如果，网站是挂在外网上，或者网速过低
css之background-position属性实现雪碧图
雪碧图就是CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，就是把多张小图标合并到一张图片上，然后用css的background-position来显示需要显示的部分。
CSS Sprite雪碧图
浏览器通常很快就可以将文本显示出来，但图像往往会减慢页面的加载速度。这一现象在移动端尤为明显，为了解决这个问题，可以将多个图像拼合成单个背景图像（sprite），再通过CSS控制具体显示图像的哪一部分
CSS雪碧图（精灵图）使用
CSS雪碧图：CSS雪碧图 即 CSS Sprites，也有人叫它CSS精灵图。雪碧图的由来：一个网站的页面需要大量的小图片或者小图标，但是大量的图片如果放在服务器上，每次当打开网站并且向服务器发送请求
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!