使用雪碧图（CSS sprite）

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

使用雪碧图的优点有以下几点：

1. 将多张图片合并到一张图片中，可以减小图片的总大小

2. 将多张图片合并到一张图片后，只需一次网络请求就可以将所需的资源全部下载，减小建立连接的消耗，在移动端尤为明显

显示雪碧图的条件：

1）需要一个设置好宽和高的容器

2）需要设置background-position的值（默认为（0，0），也就是图片的左上角），即移动图片到自己想要的图标位置。

调试方法:可以用浏览器自带的调试工具进行调试（如chrome浏览器按f12即可进行调试，慢慢移动background-position的值来达到理想的效果）

操作步骤：将图片向左移X个单位，然后向上移Y个单位，其中XY的具体数值是需要个人调试至合适位置得出的！

代码为：background-position：-xpx -ypx;

使用雪碧图（CSS sprite）

原文地址：https://www.cnblogs.com/wzp-monkey/p/10040032.html