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>