本片文章翻译自 Styling Broken Images 翻译过程中可能会在原意不变的基础上有些细微改动，望读者见谅

加载失败的图片是比较丑陋的，比如

但是我们可以让结果变得更美好。通过给电脑培训,计算机培训,平面设计培训,网页设计培训,美工培训,Web培训,Web前端开发培训元素设置CSS相关属性可以实现更美的呈现。

IMG元素你需要知道的两点知识

  1. 我们可以针对IMG元素设置排版相关的CSS样式（诸如font等属性）。一旦IMG的可替换文本（即alt属性）出现，则设置的CSS样式应用于这些文本；

  2. IMG元素属于可替换元素（可替换元素是指元素的外观和大小受外部源所影响，常见的可替换元素如IMG，OBJECT，INPUT，TEXTAREA等）。正由于可替换元素收外部源的影响，因此CSS中的伪元素::before、::after对它不起作用。但是，一旦图片加载失败，伪元素就可作用于图片之上。

理解了上述两点，我们就可以用CSS实现一个特殊的功能：

当图片正常加载时无需处理，而当加载失败时让图片应用一些特殊的样式，以达到更好的用户体验效果。

实践

采用如下的实例代码：

<img src="http://nopic.jpg" alt="休要胡说">