关于前端:性能优化之雪碧图

一、定义

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;
}