CSS精灵是一种处理网页背景图像的方式。
它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图（雪碧图），如下图所示为京东网站中的一个精灵图。
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。
下面我们来演示一个案列
首先设置几个div盒子
然后给这几个div添加css样式,设置它的宽高和其他的一些属性
给div添加背景图片,再把每个div的背景图片用背景定位定位到精灵图的你需要的位置
需要注意的是:
定位默认的原点在左上角
所以向下和向左移动的值都为负数
以上操作可以得出如下效果图
好了,案例到这里就演示完了