CSS精灵图的使用

在说明精灵图之前，需要说明有关背景图片需要注意的一个问题——背景图片是怎么进行排列布局的？

可以利用background-image属性定制某个图片作为背景，当背景图片小于容器时，就默认按照水平和垂直方向进行平铺。例如这样：

一般情况下，是不需要平铺的，所以也会清除这个默认的样式。

值得注意的是，在网页中也存在坐标系，即X轴和Y轴，X轴往右为正，这点很好理解，不同的是，数学中的Y轴是往上为正，而在网页中，Y轴是往下为正。这一点一定要注意。

在说清楚了上面的问题之后，接下来就应该说一些什么是精灵图，为什么要使用精灵图。

精灵图本质上也是一张图片，只不过，这张图片里包含了大量的比较复杂的小图片。当一个网站中需要复杂的图片时，可以利用精灵图进行修饰。比如：

上面就是一张精灵图，当网站使用到里面的某个具体的图片是，就可以直接使用这张图片作为背景图，然后通过背景定位直接找到这个小图片的位置。

如果一个网站不使用精灵图，客户端这边就需要不断发送请求到服务器，去请求这些小图片的资源，一旦图片多了，自然请求也会增多，这样就会对服务器的运行造成非常大的压力。使用精灵图之后，只需要请求一次，就可以拿到所有需要的图片资源，这样就能够减少服务器的压力，使其更注重与数据的交互上。（因为这些小的图片本质上也是数据，只不过重要性并没有其他数据高，因此不必浪费太多时间在上面）

接下来就可以使用精灵图了，首先找到自己需要的某个小图片，然后测量大小

其次使用背景属性将该图片作为背景，然后通过背景定位找到具体的位置

background: url(./assert/03.png) no-repeat -184px 0;

这里要注意，我们在设置背景定位的参数时，需要都设置为负数，因为是让图片向左和向上移动，因为该图片处于顶部，因此垂直方向上的值不需要更改，直接为0即可。

最后，就可以在页面中显示我们需要的图片了：

如果需要其他的图片，按照上面的方法即可实现，时刻注意定位的值必须为负数，并且除0以外都需要加上px单位！