精灵图

  精灵图就是将很多小图片放在一张大图片上，这些小图片是用来当做背景图片的，那为什么要把这些小图片放在一张大图片上呢？这其实是为了减少服务器的压力，这样只需要请求一次即可，就不用去多次是请求这些小图片了，下面，具体看看精灵图技术是怎么回事。

  精灵图技术其实就是使用background-position这个属性,为了解释这句话的意思，下面看一个例子，现在我有一张字母表的图片，如下

  现在我将使用精灵图技术。拼出名字ANDY。

  首先使用切片工具测出字母A的大小和在图中的位置

  测得大小为width: 105px, height: 109px,所以有

<span class="aa"></span>

.aa {
    display: inline-block;
    width: 105px;
    height: 109px;
    background: url(img/abcd.jpg) -2px -10px; /*默认是左上角对齐，所以根据A的位置，设置背景图片的位置为-2px和-10px*/

  接下来测量N的大小和位置

  测得width: 110px, height: 109px,位置为257px,277px,所以有

<span class="aa"></span>
<span class="n"></span>

.n {
    display: inline-block;
    width: 110px;
    height: 109px;
    background: url(img/abcd.jpg) -257px -277px; /*这里使用的同一张图，所以向服务器只用请求一次*/
}

  后面的做法同前面一模一样，这就是精灵图技术。