html image图片加载失败太丑了,可以css样式这样美化

原本…… 因为本站用的是qq邮箱显示头像,但是有些人的是字母+数字组合,就会导致头像会出错,有时图片不显示会导致页面太丑了,那可以这样试试……

HTML:

<image class="avator" src="图片链接"/>

CSS:

.avator{
    position:relative;
    width:100px;
    height:130px;
}
 
//只有image没有加载出来的时候 以下?才有效果
.avator:after{
    position:absolute;
    width:100px;
    height:130px;
    content:"";
    display:block;
    top:0;
    left:0;
    background:url('代替的图片链接');
    background-size:100%;
}

记录以便下次使用

文章由官网发布,如若转载,请注明出处:https://www.veimoz.com/318
2 条评论
4.2k

发表评论

已有 2 条评论

  1. 空城     Win 10 /    Chrome
    2021-01-23 13:09

    :狂汗:

  2. 游客007     MacOS /    Safari
    2020-11-29 18:29

    看看效果

!