CSS精灵图有什么作用？怎样添加精灵图
CSS 精灵，也叫 CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再用background-position 精确的定位出背景图片的位置。
精灵图的作用是减少服务器被请求次数，减轻服务器的压力，提高页面加载速度。
实现步骤：
1. 创建盒子，盒子尺寸与小图尺寸相同
2. 设置盒子背景图为精灵图
3. 添加 background-position 属性，改变背景图位置，使用 PxCook 测量小图片左上角坐标，取负数坐标为 background-position 属性值(向左上移动图片位置)。
案例：京东服务
下面我们以京东服务的图标为例。
添加上图中的精灵图，需要的代码如下：
<style>
* { margin: 0; padding: 0; box-sizing: border-box;
}
li { list-style: none;
}
.service { margin: 100px auto; width: 1190px; height: 42px;
/* background-color: pink; */
}
.service ul { display: flex;
}
.service li { display: flex; padding-left: 40px; width: 297px; height: 42px;
/* background-color: skyblue; */
}
.service li h5 { margin-right: 10px; width: 36px; height: 42px;
/* background-color: pink; */ background: url(./images/sprite.png) 0 -192px;
}
.service li:nth-child(2) h5 { background-position: -41px -192px;
}
.service li:nth-child(3) h5 { background-position: -82px -192px;
}
.service li:nth-child(4) h5 { background-position: -123px -192px;
}
.service li p { font-size: 18px; color: #444; font-weight: 700; line-height: 42px;
}</style>
