​精灵图的介绍及使用步骤

精灵图的介绍：

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

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

例如：

• 如果八张小图片需要在服务器中分别发送八次
• 合并成为一张图片后只需要在服务器发送一次

精灵图的使用步骤

1. 创建一个盒子
2. 通过PxCook量取小图片的大小，将小图片的宽高设置给盒子
3. 将精灵图设置为盒子的背景图片
4. 通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position: x y

        .one {
            width: 24px;
            height: 24px;
            background: url('./img/bj.jpg') 0 -264;
        }