请解释什么是精灵图（css sprites），以及如何实现？ ​

精灵图，也称雪碧图。因常见碳酸饮料雪碧的英文名也是 Sprite，因此也有人会使用雪碧图的非正式译名。

精灵图是把多张图片整合到一张上的图片。它被运用在众多使用了很多小图标的网站上（Gmail 在使用）。实现方法：

1. 使用生成器将多张图片打包成一张精灵图，并为其生成合适的 CSS。
2. 每张图片都有相应的 CSS 类，该类定义了background-image、background-position和background-size属性。
3. 使用图片时，将相应的类添加到你的元素中。

好处：

• 减少加载多张图片的 HTTP 请求数（一张精灵图只需要一个请求）。但是对于 HTTP2 而言，加载多张图片不再是问题。
• 提前加载资源，防止在需要时才在开始下载引发的问题，比如只出现在:hover伪类中的图片，不会出现闪烁。

参考 ​

• https://css-tricks.com/css-sprites/