美化加载失败的图片

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

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

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

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

参考文献: Styling Broken Images

Licensed under CC BY-NC-SA 4.0