设置图片无法显示时的默认样式
Broken images（即网页中图片无法显示或加载时显示的图片）是很难看的。
但它们不一定只能这样显示。我们可以通过给 img 元素应用 CSS 来提供一个比默认样式更好的体验。
两点关于 img 元素的知识点
为了理解我们如何设计 broken images 的样式，我们需要先理解两点关于 img 元素的表现机制。
- 我们可以给 img 元素应用常规的字体排版相关的样式。这些样式会应用在替换文字上，如果显示出来的话，并且它不会对生效的图片产生作用。
- img 元素是一个替换元素。这是一种“外观和尺寸都能被外部资源定义”（Sitepoint）的元素。因为这个元素由外部资源控制，所以典型的如 :before 和 :after 伪元素对它无效。但是，当图片无法读取或者加载的时候，这些伪元素就会展示出来。
正因为这两个原理，我们可以给 img 元素应用样式，这些样式会在图片无法加载时生效，并且不会对正常加载的照片产生影响。
付诸实践
通过上面那些信息，我们来进行一个实际练习，使用下面这个不存在的链接获取图片
|
1 2 |
<img src="http://bitsofco.de/broken.jpg" alt="Kanye Laughing"> |
添加有用信息
其中一种我们处理 broken images 的方法是提供一个信息给使用者告知他们这个图片无法获取。通过使用 attr() ，我们甚至可以在 broken image 中展示这个图片的原始链接。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
img { font-family: 'Helvetica'; font-weight: 300; line-height: 2; text-align: center; width: 100%; height: auto; display: block; position: relative; } img:before { content: "We're sorry, the image below is broken :("; display: block; margin-bottom: 10px; } img:after { content: "(url: " attr(src) ")"; display: block; font-size: 12px; } |
替换默认的 alt 文本
除了上面那种方法，我们可以通过伪元素来代替默认展示的 alt 属性文本，通过把伪元素定位在默认的 alt 文本上方进行覆盖文本即可。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
img { /* Same as first example */ } img:after { content: "\f1c5" " " attr(alt); font-size: 16px; font-family: FontAwesome; color: rgb(100, 100, 100); display: block; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; } |
特别的样式
为了显示（或者替换）自定义信息，我们可以通过伪元素给 broken image 应用更多的样式。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
img { /* Same as first example */ min-height: 50px; } img:before { content: " "; display: block; position: absolute; top: -10px; left: 0; height: calc(100% + 10px); width: 100%; background-color: rgb(230, 230, 230); border: 2px dotted rgb(200, 200, 200); border-radius: 5px; } img:after { content: "\f127" " Broken Image of " attr(alt); display: block; font-size: 16px; font-style: normal; font-family: FontAwesome; color: rgb(100, 100, 100); position: absolute; top: 5px; left: 0; width: 100%; text-align: center; } |
如果图片可以正常加载，并且也应用了上面那些样式，那么图片会正常展示，伪元素并不会生效。
浏览器兼容
不幸的是，并不是全部浏览器都能使用一致的方式处理 broken images。对于某些浏览器来说，即使图片没有正常显示，伪元素也不会生效。
下面是我通过例子测试出来的关于浏览器的兼容性。
*alt 文本只会在图片宽度足够大的情况下显示。如果没有指定图片的宽度，那么 alt 文本不会显示。
**字体格式不会生效
对于那些不支持伪元素的浏览器，相关的样式会被忽略，所以他们并不会产生冲突。这意味着我们仍然可以应用更多的样式，提供给那些使用支持这些样式的浏览器的使用者更加愉快的体验。