CSS-sprite（雪碧图、精灵图）

Css Sprite（优点）

• 减少图片的字节。
• 减少网页的http请求，从而大大的提高页面的性能。
• 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
• 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

实现原理

css background-position

• 控制一个层可显示的区域范围大小，
• 通过一个窗口进行背景图的滑动

总结

将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能；CSS Sprites能减少图片的字节。

原文地址：https://www.cnblogs.com/nayek/p/11962532.html