为什么叫雪碧图
雪碧图，英文名： CSS sprite ，sprite 指的是精灵
饮料 雪碧 的英文也是 sprite，翻译成 雪碧，所以 css中将其称之为 雪碧图
摘自：https://www.jianshu.com/p/0950bc9ed208
什么是雪碧图
就是将 很多很多的 小图标 放在 一张图片上，就称之为雪碧图
如下图：
目的
一个网页可能有 很多很多的 小图标，浏览器在显示页面的时候，就需要 向服务器 发送 很多次请求，带来以下问题：
- 造成资源浪费
- 会导致访问速度变慢
- 给服务器带来压力
- 由于图片小，浏览器与服务器建立链接，可能比下载图片更耗时
解决
把很多小图片（需要使用的小图标）放在一张图片上，按照一定的距离隔开
浏览器只需要发送一次请求，下载一张图片即可
显示雪碧图
需要一个设置好宽和高的容器
给容器设置背景图片
需要设置
background-position的值，默认为（0，0），也就是图片的左上角
案例
如下图，显示 小飞机：
css：
<style>
.icon{
display: inline-block;
width: 16px;
height: 16px;
background-image: url(img/xbt.png);
background-position: 0 0;
}
</style>
html：
<div class="icon">
</div>
案例2
如下图，显示红框处图标：
css：
<style>
.icon{
display: inline-block;
width: 16px;
height: 16px;
background-image: url(img/xbt.png);
background-position: -52px -26px;
}
</style>
html：
<div class="icon">
</div>