CSS的sprites（雪碧图，精灵图） *三个名字都要记住
定义：就是将界面上需要的小的导航按钮图标，小图标整合成一张背景图片
然后用background-position来实现背景图片的定位
优点：1.通过整合减少图片数量从而减少对服务器的请求次数
2.整合图片来减少图片体积
图片整合的原则：
1. 边切图边整合
2.定位时避免出现bottom，left等属性（因为图片增大时会导致定位位置错误），要用具体的数值来进行定位
3.要给小图标留出走够的空间（防止因为空间过小，其他图片出现在本区域内），一般将小图标放到图片最右侧
4.单张整合好的图片大小应该在100KB以内
5.按照分类来整合图片
6.为了方便计算尺寸，将sprites图的坐标计算成整数倍
7.整合好的图片背景要透明（保存成png或者gif格式）
CSS中的sprites
原文地址：https://www.cnblogs.com/suihang/p/9439939.html