CSS精灵技术讲解

为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites）。CSS 精灵其实就是利用背景图和不同位置的图片整合到一张大图中（精灵图），然而各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。

<img src="media/xingy.png"   />

我们需要使用CSS的 background-image、background-repeat、background-position属性进行背景定位，其中最关键的是使用background-position 属性精确地定位，精确测量每个小背景图片的大小和 位置。 给盒子指定小背景图片时， 背景定位基本都是 负值。（背景图片很少的情况，没有必要使用精灵技术，维护成本太高。 如果是背景图片比较多，可以建议使用精灵技术）