#前端学习丨当图片加载不出来时,露出图片破裂的标志,纯css简单美化

当图片遇到加载失败或者加载不出来的时候,就会出现以下情况
图裂.png

给人的印象及其不好

然后我们用CSS来写一下美化

<style>
.tinfeng{
    position:relative;
    width:100px;
    height:130px;
}

.tinfeng:after{
    position:absolute;
    width:100px;
    height:130px;
    content:"";
    display:block;
    top:0;
    left:0;                  
    background-color: antiquewhite; /*这里也可以是背景图片,不建议透明图*/
    background-size:100%;
}
</style>
<!--标签-->
<img class="tinfeng" src="http://tinfeng.png"/>

美化结果

美化结果.png

样式可以自己调,这里提供美化思路

说说你的见解

OωO
取消