BASE64转图片的使用(常用作图标和小体积图片)

Simon2021-01-22CSS32

【直接插入页面】(居中)-缺点无法缓存

<center><div><img src='data:img/jpg;base64,iVBORwg=='/></div></center>


【CSS插入】

html端代码:

<center><div id="home-service-icon"></div></center>

css端代码:

#home-service-icon{
width:52px; 
height:52px; 
background:url(data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAArkJggg==);
}

【进阶版CSS插入】- 无实际意义,只做css渲染,进一步优化网页架构

html端代码:

<center><div>
<i class="icon"></i>
</div></center>

css端代码:

.icon::before{
content:"";
display:inline-block;
width:143px;
height:60px;
background-image:url('data:image/png;base64,iVgg==');
background-position:center center;
background-repeat:no-repeat;
}


相关文章

字体CSS2020-09-23