性能优化之雪碧图

一、定义

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

三、获取雪碧图图标位置

http://www.spritecow.com/