雪碧图

CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术。该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分，该图片使用CSS background和background-position属性渲染。

优点：

1. 减少图片的字节；
2. 减少了网页的http请求；
3. 解决了网页设计师在图片命名的困扰，不需要对每张图进行命名；
4. 更换风格方便，只需要在一张上修改图片的颜色样式。

缺点：

1. 耗费内存，影响浏览器的缩放功能，拼图维护比较麻烦，使CSS的编写变得困难。

div {
  width: 42px;
  height: 34px;
  background-image: url(amazon-sprite.png);
  background-repeat: no-repeat;
  background-position: -8px -335px //雪碧图中的某个图标的位置
}