在前面我们已经了解到了网页当中背景的基本用法了，包括：
背景颜色，背景图片，背景图片是否重复，背景图片是否平铺等等基础样式。
今天要和大家讨论的是背景图的一个稍微高级一点的用法：图片精灵（也叫：雪碧图，css精灵）。先来看一些大网站：
这是淘宝，在这个地方就用到了雪碧图，再来看看这张图片是什么样子的
再来一个：百度
来看看这张背景图片：
虽然我不太理解作为百度，居然会把这么多的图标放在一张背景图片上，而且貌似这个页面也并没有用到这些图标；这些不在今天的讨论之列。我们今天就只是来看看图片精灵。
从上面两个互联网巨头的网站上来看，图片精灵这东西在网站当中的应用非常广泛，在此之前我本人也非常喜欢用雪碧图。
- 它体积小，为网站节省流量。
- 它集多张小图标于一张图片，减少了很多http请求。
- 它维护方便，一个页面上几乎所有的小图标都在这一张图片上了，增删改查都很能很方便的找到对应的位置
说了这么多，大家可能对图片精灵还是没有一个很好的概念，我们一点点来分析，为什么可以这么做：
首先我们可以通过css来给一个元素添加背景图片，详细参考前端零基础入门（七）：基础css样式之background
在这篇文章里有一个特点我可能说的不是太清楚——如果用一个小盒子去显示一张大图片会怎么样呢？
首先我在页面中放入一个100*100的盒子：
为了让大家能看到它，我给它加上了一个边框，这没啥可说的。然后我给它添加一张背景图片，我们去找个好看点的图片A Little Bunny：（这张图片的尺寸是：413*548）
加入之后的效果：
发现只显示了图片的一部分，如果不是我的经验告诉我这效果没有问题，我甚至怀疑出现灵异事件了。其实现在的情况是这样子的，我用ps来给大家示意一下：
中间紫色的小方块代表我们的元素，它的尺寸是100*100；然后加入背景图片：
为了让大家能看的清楚，我把我们的“元素”变成半透明的，于是乎，大家可以看到一个结果，元素里面显示的原来是背景图片的左上角，而图片其余的部分因为太大，所以没有显示在元素中。这就像我们去贴宣传海报，把一个海报贴墙上，自然能完整的展示，但是我们现在的情况是把一张巨幅海报贴在了一个快递盒子上，那快递盒子外面的剩余部分的海报自然也就看不见了。被裁剪掉了。
当我们增大元素的宽高，就能看到更多的背景图片了：
现在我把元素的宽高调整成300*300 终于，小兔子可怜兮兮的眼睛露出来了。不过这时候，如果有一个条件限制：元素的宽高不能再增加了，但是却要看到小兔子的脸！怎么办？ 现在一张巨幅海报在手上，但是只有一个快递盒子，然后要在这个盒子中显示最重要的内容。怎么办？当然是把最重要的这一部分贴上去，其余部分不要了嘛。于是乎我们可以去挪动一下背景图片的位置。之前我们了解到背景图片可以利用background-position来移动位置，我们来试试：
.box{
width:300px;
height:300px;
border:1px solid #0c5460;
background: url("img/bunny.jpg") no-repeat;
background-position:10px 10px;
}先来个10个像素试试水：
发现小兔子往右下角移动了：background-position接收两个参数，第一个参数代表背景图片X轴上的偏移量，第二个值代表背景图片在Y轴上的偏移量，网页当中Y轴和我们数学中的Y轴是相反的，于是乎小兔子就往右下角跑了，但是很明显小兔子的脸就在右下角，所以我们应该让小兔子往左上角跑才对。
可以利用background-position负值。这条属性是可以接收负值的 X轴给正值是往右边走，那负值自然就是往左边走了。Y轴同理。再来：
.box{
width:300px;
height:300px;
border:1px solid #0c5460;
background: url("img/bunny.jpg") no-repeat;
background-position:-50px -50px;
}看效果：
小兔子的半张脸都出来了，那么这时候要显示整张脸就只是时间问题了，调整就好了。现在的情况我们在用ps来演示一下：
由此可见，调整盒子的大小就能决定显示多少背景图片，而调整背景图片的位置，就能指定显示哪一块背景图片。这时候我们哪一张图片精灵来试试，把图片就替换成刚才百度的那张背景图：
可以看到在这个元素中就显示了很多个图标，现在我们是没有办法显示其中某一个图标的，因为元素太大了。调整元素的大小：
.box{
width:30px;
height:30px;
border:1px solid #0c5460;
background: url("img/icons_5859e57.png") no-repeat;
}
发现元素中什么都没了，这其实也正常，因为这张图片的右上角本就是一片空白，现在的情况是这样的：
紫色部分依然代表元素，灰色部分是背景图片，元素确实够小了，差不多只能显示一个小图标，但是背景图的位置不对，于是再去调整背景图片的位置。图片有内容的部分都在右下角，所以要把图片往左上角移动—— 那么background-position就必须给负值。 随便来一个值：
.box{
width:30px;
height:30px;
border:1px solid #0c5460;
background: url("img/icons_5859e57.png") no-repeat;
background-position: -300px -200px;
}得到效果：
显示了一个图标的小角，再微调一下，往下再来一点：
.box{
width:30px;
height:30px;
border:1px solid #0c5460;
background: url("img/icons_5859e57.png") no-repeat;
background-position: -300px -190px;
}一定要记得Y轴是第二个值，往下的话就把值调大一点：
现在的情况再来看看ps:
调整对应的值，得到的效果也是一样的。那么这个300，190其实代表的就是这个图标的坐标。直接在图片上可以量出来的：
比如我现在要显示这一块：
那么直接去量这一块距离图片左上角的距离就可以了：
可以看到距离图片的顶部是158px, 距离图片的左边是638px ;
调整background-position:记住都要给负值！！！！
.box{
width:30px;
height:30px;
border:1px solid #0c5460;
background: url("img/icons_5859e57.png") no-repeat;
background-position: -638px -158px;
}效果:
现在由于元素太大，还显示了这个图标以外的一小部分，再去调整元素的大小就好了。
那么在实际工作中，我们要做的就是从设计稿上把所有的小图标收集起来，放在一张图片上，并且排好版。一般来说我会画一个50*50的网格，这个网格的大小看图标而定。然后把一个个的小图标放在网格的中间，然后用的时候就直接用网格的坐标就可以了，非常的方便！
我做了一个小Case。帮助大家去理解雪碧图。有兴趣可以点点~
————————————————————————————————————————————————————————
最后总结：
雪碧图的好处
- 它体积小，为网站节省流量。
- 它集多张小图标于一张图片，减少了很多http请求。
- 它维护方便，一个页面上几乎所有的小图标都在这一张图片上了，增删改查都很能很方便的找到对应的位置
- ……
未来：虽然雪碧图已经很好了，不过慢慢的已经不够满足开发需求了，将来将会是字体图标的天下。期待后续推出的字体图标篇吧~