css：利用伪类处理图片加载失败的样式问题

实现效果

实现代码

index.html

    <h2>未做错误处理</h2><div style="font-size: 0"><img src="./img/image.jpg" alt="" /><img src="./img/image-1.jpg" alt="" /></div><h2>有错误处理</h2><div style="margin-top: 20px; font-size: 0; display: flex"><img class="mo-image" src="./img/image.jpg" alt="标题" /><img class="mo-image" src="./img/image-1.jpg" alt="标题" /></div>

style.css

img {width: 300px;height: 150px;object-fit: cover;display: inline-block;
}.mo-image {display: inline-block;/* transform: scale(1); */position: relative;
}/* 显示占位图片 */
.mo-image::before {content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: #f5f5f5 url(../img/image-error.jpg) no-repeat center / 50% 50%;color: transparent;
}/* 显示alt中的文字 */
.mo-image::after {content: attr(alt);position: absolute;left: 0;bottom: 0;width: 100%;line-height: 2;background-color: rgba(0, 0, 0, 0.5);color: white;font-size: 12px;text-align: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}

在线示例：https://mouday.github.io/front-end-demo/image-error/index.html

参考
视频：图片加载出错样式最佳实践

css：利用伪类处理图片加载失败的样式问题相关推荐

JQuery Mobile - 处理图片加载失败！
重点来了:一定要记住error事件不冒泡(如果要用js的方法替换默认出错图片,记得把img的alt属性去掉). 相关的知识点:jquery的ready方法.$("img").err ...
Github css加载失败，样式混乱解决办法
github被墙的解决办法 Github css加载失败,样式混乱解决办法打开cmd,输入 nslookup github.com 8.8.8.8 ,下面就会显示出github的服务器地址列表 ...
美化加载失败的图片(Stying broken images)
原文出处https://bitsofco.de/styling-broken-images/ 翻译:王浴昊注明出处,本文可以转载. 加载失败的图片很丑陋. 事实上并不一定要如此.我们可以通过对< ...
java类如何加载_简述Java类加载方式及流程
在学习反射那一章节时想到自己之前学过的知识,故整理一番,希望能提供一点帮助,水平有限,如若有误欢迎指正. Java提供了两种类的装载方式.一是预先加载,二是按需加载.因为可以对类进行按需加载,所以程序 ...
解决angularjs图片加载失败
1 angularjs图片加载失败,本文的angularjs图片加载失败中的angularjs指的是angular2.angular4. 2 首先在img标签上添加error事件: <img [ ...
html加载类失败,css样式为什么会加载失败？
有很多刚刚接触css的新手有时会遇到css加载失败这个问题,但测试时,网页上没有显示该样式的问题,这就说明CSS加载失败了. 出现这种状况一般是因为的css路径书写错,或者是在浏览器中禁止掉了css的 ...
css加载失败的原因是什么？
有很多刚刚接触css的新手有时会遇到css加载失败这个问题,但测试时,网页上没有显示该样式的问题,这就说明CSS加载失败了.那么为什么会加载失败?css加载失败的原因是什么? 造成css加载失败的原因 ...
CSS加载失败眉毛,CSS加载失败的6个原因
有很多刚刚接触css的新手有时会遇到css加载失败这个问题,但测试时,网页上没有显示该样式的问题,这就说明CSS加载失败了.出现这种状况一般是因为的css路径书写错,或者是在浏览器中禁止掉了css的加 ...
php项目css加载失败,浅谈CSS加载失败的6个原因
在页面布局时,都主张结构与样式分离,但是有些时候,css样式不能成功加载,这是为什么呢?这篇文章主要讲了CSS加载失败的6个原因,有需要的朋友可以参考一下,希望对你有用. 有很多刚刚接触css的新手有 ...

css：利用伪类处理图片加载失败的样式问题

css：利用伪类处理图片加载失败的样式问题相关推荐

最新文章

热门文章