CSS精灵图有什么作用？怎样添加精灵图

CSS 精灵，也叫 CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再用background-position 精确的定位出背景图片的位置。

精灵图的作用是减少服务器被请求次数，减轻服务器的压力，提高页面加载速度。

实现步骤：

1. 创建盒子，盒子尺寸与小图尺寸相同

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

3. 添加 background-position 属性，改变背景图位置，使用 PxCook 测量小图片左上角坐标，取负数坐标为 background-position 属性值(向左上移动图片位置)。

案例：京东服务

下面我们以京东服务的图标为例。

添加上图中的精灵图，需要的代码如下：