使用CSS美化加载出错的图片

引子

浏览网页时有时会遇到图片加载失败的场景，浏览器往往会给出一个非常丑陋的显示效果：

为了更好的用户体验，这里可以仅仅通过CSS来优化一下样式。恰巧最近工作上遇到了这样的需求，在此记录下自己是如何解决的。

思路

需要注意两个偏理论上的知识点：

1. img标签是个可替换元素，即其呈现是由外部资源决定的，也因此:before和:after这两个伪元素对其不起作用。但是，当图片加载失败时，伪元素就能派上用场了。
2. 可以对img标签使用排版相关的CSS规则，比如字体，这些规则只对alt特性起作用。

运用上面两个特性，我们就能做到当图片加载失败时，对其美化。

代码

使用下面结构当做例子：

<img src="http://www.somewhere.com/images/broken.jpg" alt="马蛋，图片加载出错了...">

图片加载失败，下面的CSS会发挥作用：

img { 
    font-family: 'Helvetica'; 
    font-weight: 300; 
    line-height: 2; 
    text-align: center; //自此以上的css会影响alt的样式
    width: 100%; 
    height: auto; 
    display: block; 
    position: relative; 
}
img:before { 
        content: "\f1c5" " " attr(alt);  //content的使用方式请自行谷歌之
        font-family: FontAwesome; //注意使用的是font awesome 哦，别忘了引入。
        color: rgb(100, 100, 100); 
        display: block; 
        position: absolute; 
        z-index: 2; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%; 
        background-color: #fff; 
} 
 img:after { 
        content: "(url: " attr(src) ")"; 
        display: block; 
        position: relative; 
        color: #00aeef; 
        bottom: -10px; 
        z-index: 1000;
}

最后，如果图片加载失败，将呈现如下样式：

肿么样，是不是好看了很多！