本文也算是属于高性能web前端优化指南
CSS Sprite是指一种图片整合技术，而且从名字就能得知：这是一项运用于CSS的技术。
CSS Sprite，就是把你需要使用的一些零碎小图片（通常是小图标之类），通通集合在一张大图片里面，然后在CSS进行调用时，通过background-position属性定位到你需要显示的图片上，造成一种正常显示的“假象”。
通常一张整合了的CSS Sprite图片如下：
很吓人吧，但网页上显示你看到的是这样：
左图中分别出现了3个小图标。
通过chrome或firebug，可以看到所有有图标出现的元素都有一个共同的CSS背景图片，代码例如：
.bg {background-image:url(images/ex.png);
然后在每个不同的图标处指定不同的background-position，如：
.bg1 { background-position:-22px 33px; width:20px;height:20px; };
这时候给任一html标签加上class=”bg bg1″，就能实现以全背景图片做背景，但只显示特定x坐标和y坐标的的图片效果。
使用css sprite技术的好处：
- 可以减少大量零碎图片；
- 合并后的大图比分离的小图体积加起来要小得多。 因为再小的图片也有基础信息，10张小图就有10个基础信息，但一张大图只有一个基础信息。
- 明显减少http请求数据量
使用css sprite技术的注意事项：
- 不要企图把所有小图标图标都堆在一张大图上（强迫症…）
- 如果大图加载失败，则所有图标都不能显示出来
- 显示图标的标签应该限制宽高，不然超出范围的话可能会显示出其他的小图片
什么时候使用CSS Sprite技术？
比如一个文章分类的UL，每个LI的列表图标都不一样；比如一个图片按钮的正常与hover的两种状态；等等
———————————————————————————
更全面的CSS Sprite技术请大家自行摸索吧，抛砖引玉是一种美德（其实是我懒）
