当前位置:网站首页>性能优化之雪碧图

性能优化之雪碧图

2020-12-08 11:53:30 Cynthia

一、定义

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

版权声明
本文为[Cynthia]所创,转载请带上原文链接,感谢
https://segmentfault.com/a/1190000038409895