html中img图片加载失败时的默认样式美化

文章2019-06-11397 人已阅来源:网络

图片加载失败的默认样式是很难看的。但是我们可以加上样式来处理。

比如:

<img class="avatar" alt="tonjay.com" src="//www.tonjay.com/favicon.ico"/>

解决方法就是:如果图片没有加载出来,我们可以给alt值增加样式

  1. 我们可以给伪元素添加背景图片。当然,图片正常加载时是不显示的。
  2. 也可以给伪元素输出图片alt文字信息

设置图片时代码:

.avatar{
    position:relative;
    width:100px;
    height:130px;
}
 
/*只有image没有加载出来的时候 以下👎才有效果*/
.avatar:after{
    position:absolute;
    width:100px;
    height:130px;
    content:"";
    display:block;
    top:0;
    left:0;
    background:url('/img/default.png');
    background-size:100%;}

设置alt文字信息时:

.avatar:after{
    content: attr(alt);
    /*可以自定义设置样式*/
}