当前位置:网站首页>Sprite chart of performance optimization

Sprite chart of performance optimization

2020-12-08 11:53:30 Cynthia

One 、 Definition

CSS Image merge (Image sprites) technology , Also made CSS Map positioning 、 Image Genie (sprite, It means spirit ), It is used in many web applications that use a lot of small icons . It can be used as part of the image , It makes it possible to replace multiple small files with one image file . Compared to a small icon, an image file , What you need for a single picture HTTP Fewer requests , More memory and bandwidth friendly .

Two 、 Usage method

utilize background-position Locate the icon , If it turns out to be <img> label , Replace with <a>、<div>

1、 Replace icon : Set up width、height And the location

.search1 {
    background: url(../top/new_top_icons.png?20201205) no-repeat -344px 0;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 10px;
    right: 10px;
}

2、 Replace the background : The width and height of the icon cannot be set , Pseudo elements can be used 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;

}

Be careful :content You have to set , Otherwise, the picture will not be displayed

3、 Mobile terminal uses sprite map : Set up background-size For the corresponding 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://chowdera.com/2020/12/20201208115312327g.html