CSS雪碧图，即CSS Sprite，也有人叫它CSS精灵图，是一种图像拼合技术。该方法是将多个小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。
雪碧图的使用场景
静态图片，不随用户信息的变化而变化。 小图片，容量比较小（2~3k）。 图片加载量比较大。目的
减少Http请求数量，加速内容显示。因为每请求一次，就会和服务器建立一次链接，而建立链接是需要额外的时间的。
使用
使用雪碧图之前，我们需要知道雪碧图中各个图标的位置。
从上面的图片不难看出雪碧图中各个小图标（icon）在整张雪碧图的起始位置，例如第一个图标（裙子）在雪碧图的起始位置为 x：0，y：0，第二个图标（鞋子）在雪碧图的起始位置为 x：0，y：50px，第三个图标（足球）在雪碧图的起始位置为x：0，y：100px，依次类推可以得出各个图片相对于雪碧图的起始位置。
以上面的雪碧图为例（实际雪碧图中各个小图片的起始位置和上面的展示图不同）用一个Demo来阐述它的使用方法。
HTML
| <div> <ul class="sidebar"> <li><a href=""><span class="spr-icon icon1"></span>服装内衣</a></li> <li><a href=""><span class="spr-icon icon2"></span>鞋包配饰</a></li> <li><a href=""><span class="spr-icon icon3"></span>运动户外</a></li> <li><a href=""><span class="spr-icon icon4"></span>珠宝手表</a></li> <li><a href=""><span class="spr-icon icon5"></span>手机数码</a></li> <li><a href=""><span class="spr-icon icon6"></span>家电办公</a></li> <li><a href=""><span class="spr-icon icon7"></span>护肤彩妆</a></li> <li><a href=""><span class="spr-icon icon8"></span>母婴用品</a></li> </ul> </div> |
