CSS Sprites精灵图(雪碧图)

简介

• CSS精灵图，是一种网页图片应用处理方式。允许将一个页面涉及到的所有零星图片都包含到一张大图中
• 利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位， 访问页面时避免图片载入缓慢的现象。

优点

1. 减少网页的http请求，从而提高页面的性能，这是其最大的优点，也是被广泛传播和应用的主要原因
2. 能减少图片的字节
3. 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，提高了网页制作效率。
4. 只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。

缺点

1. 图片合并麻烦：
   • 图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。
2. 图片适应性差：
   • 在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。
3. 图片定位繁琐：
   • 开发时需要通过工具测量计算每个背景单元的精确位置。
4. 可维护性差：
   • 页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节。