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

Question

我想给损坏/错误的图像添加一些额外的CSS:

img:error {
  max-width: 20px;
  max-height: 20px;
}

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

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

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

Answer 1

CSS规范或草稿中没有办法,但Firefox有一个专有的选择器(伪类):-moz-broken.它的文档非常简洁,并且"主要供主题开发人员使用",但可以使用如下:

:-moz-broken { outline: solid red }
:-moz-broken:after { content: " (broken image)" }

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

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

Answer 2

为此，您应该使用 alt 属性，如果链接断开就会显示，您还可以设置图像背景的样式：例如：

img {
  display:inline-block;
  vertical-align:top;
  min-height:50px;
  min-width:300px;
  line-height:50px;
  text-align:center;
  background:
    linear-gradient(to bottom,
      blue,
      orange,
      green);
  font-size:2em;
  box-shadow:inset 0 0 0 3px;
}

显示图像时，这些样式将被隐藏。 http://codepen.io/anon/pen/Kxipq 如您所见，我们不检查损坏的链接，而是提供替代的、对盲人有用的、搜索引擎等，以及一些额外的样式完成它:)

一些额外的图像 alt 属性最佳实践