一、定义
CSS 图像合并（Image sprites） 技术，亦作 CSS 贴图定位、图像精灵（sprite，意为精灵），被使用于泛滥应用大量小图标的网页利用之上。它可取图像的一部分来应用，使得应用一个图像文件代替多个小文件成为可能。相较于一个小图标一个图像文件，独自一张图片所需的 HTTP 申请更少，对内存和带宽更加敌对。
二、应用办法
利用background-position对图标进行定位，若原来是<img>标签，替换成<a>、<div>
1、替换图标：设置width、height以及地位即可
.search1 { background: url(../top/new_top_icons.png?20201205) no-repeat -344px 0; width: 16px; height: 16px; position: absolute; top: 10px; right: 10px;}2、替换背景：因为不能设置图标的宽高，能够利用伪元素after/before
.nav_0814 li::after{ background: url(../images/new_iconss.png?2020120) no-repeat -139px -327px; width: 2px; height: 20px; position: absolute; right: 0; top: 30%; content: ""; display: inline-block;}留神：content必须设置，不然显示不出图片
3、挪动端应用雪碧图：设置background-size为对应的rem
.side-wrap .side .icon.help { background: url("../img/h5_icons.png?20201205") no-repeat -2.04rem 0; display: inline-block; background-size: 6.81rem 3.52rem;}