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

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

HTML:

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

CSS:

  1. .avator{
  2. position:relative;
  3. width:100px;
  4. height:130px;
  5. }
  6. //只有image没有加载出来的时候 以下?才有效果
  7. .avator:after{
  8. position:absolute;
  9. width:100px;
  10. height:130px;
  11. content:"";
  12. display:block;
  13. top:0;
  14. left:0;
  15. background:url('代替的图片链接');
  16. background-size:100%;
  17. }

记录以便下次使用

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

发表评论

已有 2 条评论

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

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

    看看效果

!