要了解如何用纯CSS美化加载失败的图片,我们先要重温一下可替换元素的概念。

可替换元素(replaced element)的展现不是由CSS来控制的。这些元素是一类外观渲染独立于CSS的外部对象。
典型的可替换元素有 <img>、 <object>、 <video> 和表单元素,如<textarea>、 <input>
某些元素只在一些特殊情况下表现为可替换元素,例如 <audio> 和 <canvas> 。 通过 CSS content 属性来插入的对象
被称作 匿名可替换元素(anonymous replaced elements)。

因为可替换元素是独立于css渲染的,所以对这些元素设置伪类也就没有意义了,但是对于img标签,如果图片加载失败也就相当于没有独立的外观渲染了,那么我们对其设置的伪元素也就会生效了。

但是要注意的是,IE所有版本在任何时候对 img 标签设置伪元素都是无效的。

<p data-height="300" data-theme-id="light" data-slug-hash="MyNmNN" data-default-tab="html,result" data-user="zhangchen915" data-embed-version="2" class="codepen">See the Pen 美化加载失败的图片 by zhangchen (@zhangchen915) on CodePen.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

参考文献:
Styling Broken Images