CSS 雪碧图及其优缺点

CSS Sprites简介：国内叫雪碧图或者雪碧精灵。它允许将网页中多个零星小图都包含到一张大图中去，减少每个图的 HTTP 请求来提高图片加载效率，通过 background-image、background-position、background-repeat 来对图片定位。

优点：

• 通过将多张图片合并成一张，可以有效减少 HTTP 请求，提高页面加载的性能（主要原因）
• 合成后的图片总大小小于多个图片和的大小
• 整理起来更为方便，同一个按钮不同状态的图片也不需要一个个切割出来并个别命名
• 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。
• 只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。

缺点

• 合成起来麻烦
• 适应性差
• 可维护性差