是否可以使用CSS检测损坏/未加载(错误)图像?

前端之家收集整理的这篇文章主要介绍了是否可以使用CSS检测损坏/未加载(错误)图像?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想给损坏/错误的图像添加一些额外的CSS:
img:error {
  max-width: 20px;
  max-height: 20px;
}

但这不起作用.有没有办法用纯CSS来做到这一点?这有一个img伪选择器吗?甚至更好:一个有效的肮脏黑客?

我环顾四周,但似乎没有人想知道=)

(是的,我知道JS可以做到,我知道如何;不需要提及它.)

解决方法

在CSS规范或草稿中没有办法,但Firefox有一个专有的选择器(伪类) :-moz-broken.它的文档非常简洁,它说“主要供主题开发人员使用”,但它可以用于例如如下:
:-moz-broken { outline: solid red }
:-moz-broken:after { content: " (broken image)" }

尽管文档说它“匹配表示断开图像链接的元素”,但它实际上匹配了断开的图像(src属性不引用图像的img元素),无论它们是否是链接.据推测,“链接”在这里真的意味着“引用”.

CSS 2.1说:“此规范没有完全定义:替换元素之前和之后的交互(例如HTML中的IMG).这将在未来的规范中更详细地定义.“但是Selectors Level 3(CSS3选择器)只是对它们说:”它们在CSS 2.1中进行了解释.“在实践中,浏览器以不同的方式处理它们.奇怪的是,Firefox支持:-moz-broken:after但忽略:-moz-broken:之前.它不支持普通图像的这些伪元素中的任何一个,但是img:after也支持损坏的图像(即,指定的内容出现在alt属性值之后).

原文链接:https://www.f2er.com/css/242281.html

猜你在找的CSS相关文章