雪碧图

1. 什么是雪碧图？

雪碧图也叫CSS精灵，是一CSS图像合成技术；

上面解释说它是一项技术，但我们开发人员往往将小图标合并在一起之后的图片称作雪碧图；术语定义其实不用纠结，我们知道它主要用在小图标显示上就行了。

只有一张大的合并图，每个小图标节点如何显示单独的小图标呢？

其实就是截取大图一部分显示，而这部分就是一个小图标，如下图：

如显示上面 QQ 小图标，则在合并图中X轴向右60像素， Y轴0像素，截取宽高均为48像素；则这个小图标就出来了：

关键样式：

background-image: url("sprite.png");
background-position: -60px 0px;
width:48px;
height:48px;

参考：