CSS中如何使用精灵图?

一、什么是精灵图？

项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图

二、精灵图的作用

减少服务器发送次数，减轻服务器的压力，提高页面加载速度

三、使用步骤

1.创建一个盒子, 盒子的尺寸和小图尺寸相同

2.将精灵图设置为盒子的背景图片

3.修改背景图位置

（以小图片左上角为坐标开始测量，设置给盒子的background-position：x y，这里的xy一般统一取负值，若图片尺寸不精准，自行调试修改即可）

.box {
            display: block;
            width: 20px;
            height: 20px;
            /* background-color: pink; */
            background-image: url(./images/sprites.png);
            /* 水平位置 垂直位置 */
            /* 精灵图位置往左 往上都是负值 */
            background-position: -140px -7px;
        }