雪碧图

1. 什么是雪碧图？

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

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

CSS雪碧图应用原理

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

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

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

关键样式：

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

参考：

https://zhuanlan.zhihu.com/p/23873229