CSS精灵。也叫CSS Sprites,是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中,再background-position精准的定位出背景图片的位置
优点:减少服务器被请求次数,减少服务器的压力,提高页面加载速度
实现步骤:
- 创建盒子,盒子尺寸与小图尺寸相同
- 设置盒子背景图为精灵图
- 添加background-position属性,改变背景图位置
使用PxCook测量小图片左上角坐标
取负数坐标为background-position属性值(向左上移动图片位置)