html image图片加载失败 css样式美化

最新推荐文章于 2024-08-20 10:32:53 发布

Museions

最新推荐文章于 2024-08-20 10:32:53 发布

阅读量4k

点赞数

分类专栏：大前端开发文章标签： css image html

本文解决了你的问题吗？转载注明链接,帮助更多人。

本文链接：https://blog.csdn.net/museions/article/details/89497603

版权

大前端开发专栏收录该内容

157 篇文章 7 订阅

订阅专栏

HTML：

<image class="avator" src="http://ksbdkad.png"/>

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('/img/default.png');
    background-size:100%;
}

注明：来源也不知道是哪里，好像是MDN，之前就做过类似的，后来一直不用，最近用了费力想了出来，记录以便下次使用。