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

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

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

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

See the Pen 美化加载失败的图片 by zhangchen (@zhangchen915) on CodePen.

参考文献： Styling Broken Images