雪碧图 是利用css 的一种图片合成技术， 它使用的主要是background 和background-position 两个属性，调整背景图片的位置，在不同的地方显示不同的图片。
雪碧图最常应用于网页中的一系列图标，logo等，当一个页面中的图标数量很多时，我们可以考虑将所有图标合成一张大图片，即雪碧图，通过background-position调整可以显示这张大图片的不同部位。例如下面这张雪碧图，
（sprite.png,每个图标的宽是30px，高是24px）
下面的代码是应用雪碧图
<span style="white-space:pre"></span>li i{
<span style="white-space:pre"></span>background: url(sprite.png);
<span style="white-space:pre"></span>display: inline;
<span style="white-space:pre"></span>width: 30px;
<span style="white-space:pre"></span>height: 24px;
<span style="white-space:pre"></span>float: left;
<span style="white-space:pre"></span>margin: 3px 10px 0 0;
<span style="white-space:pre"></span>}
<span style="white-space:pre"></span>.cat-1 i{
background-position: 0 0;
}
.cat-2 i{
background-position: 0 -24px;
}
.cat-3 i{
background-position: 0 -48px;
}
.cat-4 i{
background-position: 0 -72px;
}
.cat-5 i{
background-position: 0 -96px;
}
.cat-6 i{
background-position: 0 -120px;
}
.cat-7 i{
background-position: 0 -148px;
}
.cat-8 i{
background-position: 0 -172px;
}
<span style="white-space:pre"></span><ul>
<li class="cat-1">
<i></i>
<h3>服装内衣</h3>
</li>
<li class="cat-2">
<i></i>
<h3>鞋包配饰</h3>
</li>
<li class="cat-3">
<i></i>
<h3>运动户外</h3>
</li>
<li class="cat-4">
<i></i>
<h3>珠宝手链</h3>
</li>
<li class="cat-5">
<i></i>
<h3>手机数码</h3>
</li>
<li class="cat-6">
<i></i>
<h3>办公家电脑</h3>
</li>
<li class="cat-7">
<i></i>
<h3>护肤彩妆</h3>
</li>
<li class="cat-8">
<i></i>
<h3>母婴用品</h3>
</li>
</ul>
效果如图
分析总结：
1.当页面中有大量图片时，若每张图片都独立加载，每张图片都是通过http请求服务器，会大大增加服务器的压力和页面的加载时间，但是如果使用雪碧图，则只需加载一张合成的大图，其余的通过css调整，虽然css代码会变得复杂点，但是并不会太大影响网页性能2.移动端web对网页的性能要求是极高的，建议做移动端的可以从雪碧图开始
3.然而，页面中有些图片并不能使用雪碧图合成。例如，banner中的宣传大图，类似这种动态更新的图片是不建议使用雪碧图的。