精灵图的介绍:
场景:项目中将多张小图片合并成一张大图片,这张大图片称为精灵图。
优点:减少服务器发送次数,减轻服务器的压力,提高页面的加载速度。
例如:
- 如果八张小图片需要在服务器中分别发送八次
- 合并成为一张图片后只需要在服务器发送一次
精灵图的使用步骤
- 创建一个盒子
- 通过PxCook量取小图片的大小,将小图片的宽高设置给盒子
- 将精灵图设置为盒子的背景图片
- 通过PxCook测量小图片左上角坐标,分别取负值设置给盒子的background-position: x y
.one {
width: 24px;
height: 24px;
background: url('./img/bj.jpg') 0 -264;
}