第十五章 CSS精灵图

CSS Sprite(雪碧图或者CSS精灵图)

雪碧图的本质：将项目中所有的小图进行整合，整合为一张大图，然后使用背景图片和background-position属性来进行定位，进而显示出整张大图里某一个小的区域。

雪碧图的优势：介绍服务器端硬盘的寻址压力，减少HTTP请求次数；繁忙的网站有必要使用，但不繁忙的网站完全没有必要。

劣势：

1. 使用麻烦
2. 维护起来不能改变原有图片的位置。

使用注意事项：

1.确定装载图片的容器，并为其设置宽高（图标的宽高）。
2.为装载图片的容器设置background-image属性。
3.测量要使用的图标在雪碧中的相对位置。
4.为装载容器设置background-position属性，属性值就为刚刚量取的相对位置（该值都为负值，没有特性情况）。