概念：将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。
优点：
- 减少HTTP请求数，极大地提高页面加载速度。
- 增加图片信息重复度，提高压缩比，减少图片大小。
- 更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现。
缺点：
- 图片合并麻烦。
- 维护麻烦，修改一个图片可能需要从新布局整个图片，样式。
实现方法：
- 使用生成器将多张图片打包成一张雪碧图，并为其生成合适的 CSS。
- 每张图片都有相应的 CSS 类，该类定义了
background-image、background-position和background-size属性。 - 使用图片时，将相应的类添加到你的元素中。
好处：
- 减少加载多张图片的 HTTP 请求数（一张雪碧图只需要一个请求）。但是对于 HTTP2 而言，加载多张图片不再是问题。
- 提前加载资源，防止在需要时才在开始下载引发的问题，比如只出现在
:hover伪类中的图片，不会出现闪烁。
参考
01，原理和普通图片雪碧图一样。
02，好处是不再需要为高清屏准备额外的2倍图。因为SVG与分辨率无关。
03，实现方式：
方式1：所有的图标使用<symbol>元素来定义在 SVG 代码中，并且隐藏它。然后使用<use>元素来通过<symbol> 的 xlink:href="#id"来引用它。
方式2：用SVG的viewbox属性来指定显示SVG画布的区域，跟background-position原理差不多。