3n44fZgo - 12天前注册会员;
73n5lsCR - 26天前注册会员;
NaZ2pUfG - 35天前注册会员;
bwpKIZwD - 84天前注册会员;
jRAbGRXk - 137天前注册会员;
加入我们(61 )

#前端学习丨当图片加载不出来时,露出图片破裂的标志,纯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

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

声明:本站原创文章文字版权归本站所有,转载务必注明作者和出处;本站转载文章仅仅代表原作者观点,不代表本站立场,图文版权归原作者所有。如有侵权,请联系我们删除。