CSS Sprite雪碧图
CSS Sprite 也叫CSS精灵，该方法是将多个小图标等图片集成到一张大图上，然后利用 background-image 和background-position 两个属性进行背景定位来控制需要显示的部分。
比如在有很多小图片、小图标的网页上，每个小图标都单独用一张图片， 页面加载的时候，每张图片的显示都产生一个HTTP请求，如果请求文件过多则会引发性能问题。为了减少http请求数，将大量的图片整合成一张图（Sprite）来使用，这样加载的时候只需加载一次，从而提高页面的性能。
雪碧图的制作：
- PS 手动拼图
- 使用 Sprite 工具自动生成（CssGaga 或者 CssSprite.exe）（CssGaga 的详细使用见百度经验）
什么时候使用及使用技巧：
- 静态图片，图片不随用户信息的变化而变化，比如一些小图标等；
- 小图片，容量比较小的；图片加载量比较大的。大图片不建议用，拼完之后就更大了，加载就慢了；
- 使用到固定大小的盒子（box）里，这样才能够遮挡住不应该显示的部分；
- CSS Sprites 的图片尽量不要有大空隙，多数情况下会增大体积；
- 在 CSS Sprites 图片中，水平排列的图片会比垂直排列的文件体积大。
缺点：
- 在图片合并的时候，要把多张图片有序合理的合并成一张图片，需要留足够的空间，防止出现不必要的背景，相比直接使用单个图片比较繁琐；
- 在宽屏，高分辨率的屏幕下的自适应页面，图片如果不够宽很容易出现背景断裂；
- 比较麻烦，需要测量计算每一个背景单元的精确位置；
- 维护的时候比较麻烦，如果页面背景在原来的地方放不下，又只能（最好）往下加图片然后更改CSS，这样图片的字节就增加了；
- 由于图片的位置需要固定为某个绝对数值，这就失去了诸如 center 之类的灵活性。
