CSS精灵技术（sprite）

精灵技术产生的背景

 当用户访问一个网站时，须要向服务器发送请求，网页上的每张图像都要通过一次请求才能展示给用户。

然而，一个网页中每每会应用不少小的背景图像做为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大下降页面的加载速度。为了有效地减小服务器接受和发送请求的次数，提升页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。

精灵技术本质

简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的全部零星背景图像都集中到一张大图中去，而后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像便可所有展现出来。一般状况下，这个由不少小的背景图像合成的大图被称为精灵图（雪碧图）

精灵技术的使用

CSS 精灵实际上是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素一般只须要精灵图中不一样位置的某个小图，要想精肯定位到精灵图中的某个小图，就须要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。

制做精灵图

CSS 精灵实际上是将网页中的一些背景图像整合到一张大图中（精灵图），那咱们要作的，就是把小图拼合成一张大图。

大部分状况下，精灵图都是网页美工作。

精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放。
精灵图的宽度取决于最宽的那个背景。
能够横向摆放也能够纵向摆放，可是每一个图片之间，间隔至少隔开偶数像素合适。
在精灵图的最低端，留一片空隙，方便咱们之后添加其余精灵图。