CSS 精灵（ sprite ）技术

产生背景

[ 网页请求原理 ] 用户访问一个网站时，需向服务器发送请求，网页上的每张图片都要经过一次请求才能展现给用户。

然而，一个网页中往往会应用很多小的背景图作为修饰，当网页中的图像过多时，服务器就会频繁的接受和发送请求，这将大大降低页面的加载速度。为了有效的减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS 精灵技术（又可以称之为 CSS Sprite、精灵图 / 雪碧图）。

精灵技术的本质

简单来说，CSS 精灵是一种处理网页背景图像的方式。它将一个页面中涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务器发送一次请求，网页中的背景图像即可全部展现出来。通常情况下，这个有很多小的图像合成的大图被称为精灵图。

精灵技术的使用

[ 制作精灵图 ] 大部分情况下，精灵图是由美工使用 PS 来制作的。需要注意的是：

• 精灵图上放的都是小的装饰性的背景图片，不能出现插入图片；
• 精灵图的宽度取决于最宽的那个背景；
• 摆列方式可以是横向的，也可以是纵向的，但每个图片之间需间隔开偶数像素的空间；
• 背景图很少的情况下，没必要用精灵图，维护成本太高；如果背景图片太多，建议使用。

CSS精灵，其实是将网页中的一些背景图像整合到一张大图（精灵图）中。然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用：

background-image、background-repeat 和 background-position，其中最重要的是 background-position。

// css 精灵图需要配合背景的图片和背景定位

1. 引入精灵图

.basic{
    background-image:url(ui.png);
    width:80px;
    height:80px;
    background-repeat:no-repeat;
    display:inline-block;
}

2. 精确定位需要显示的小图标坐标

.sprite1{
    background-position:80px 0px
}
.sprite2{
    background-position:160px 160px
}

精灵图虽然实现了缓解服务器压力以及用户体验等问题，但还是有一个很大的不足，那就是牵一发而动全身。这些图片的背景都是详细测量而得出来的，如果需要改动页面，将会是很麻烦的一项工作 ...