Styling Broken Images (给加载失败的图片加上css样式)

Styling Broken Images (给加载失败的图片加上css样式) - 不完全翻译

前言

Broken images are ugly.

But they don’t always have to be. We can use CSS to apply styles to the element to provide a better experience than the default.

图片加载失败的默认样式是很难看的。但是我们可以加上样式来处理

两个知识点 （Two Facts About The Element）

1. We can apply regular typography-related styling to the element. These styles will be applied to the alternative text, if it is displayed, and will not affect the working image.

>2. The element is a replaced element. This is an element “whose appearance and dimensions are defined by an external resource” (Sitepoint). Because the element is controlled by an external source, the :before and :after pseudo-elements typically shouldn’t work with it. However, when the image is broken and not loaded, these pseudo-elements can appear.


1. 如果图片没有加载出来，我们可以给alt值增加样式
2. 如果图片没有加载出来，我们可以设置:before和:after伪元素。当然，图片正常加载时是没作用的。

实战

准备一张图片先

<img src="http://bitsofco.de/broken.jpg" alt="Kanye Laughing">

给失败图片添加帮助信息

One way we can handle broken images is to provide a message to the user saying that the image is broken. Using the attr() expression, we can even display the link to the broken image.

我们可以给加载失败的图片提供帮助文案，甚至可以利用attr()属性将图片的原始路径显示出来

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值）

Alternatively, we can use the pseudo-elements to replace the default alt text that shows, by positioning the pseudo-element on top of the default text, hiding it from view.

我们可以把alt值读取出来，放在伪元素里面显示，然后用定位的方式进行排版

img {    font-family: 'Helvetica';  font-weight: 300;  line-height: 2;    text-align: center;  width: 100%;  height: auto;  display: block;  position: relative;}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;}

更好看的样式

已经这样了，不如发挥才智，做的更漂亮吧！

img {    font-family: 'Helvetica';  font-weight: 300;  line-height: 2;    text-align: center;  width: 100%;  height: auto;  display: block;  position: relative;  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;}

如果图片加载成功，那么这些css是没有作用的。原文在这里放了一个黑人照片，我不喜欢。就不放了。

浏览器兼容性

Browser Alt Text :before :after Chrome (Desktop and Android) √ √ √ Firefox (Desktop and Android) √ √ √ Opera (Desktop) √ √ √ Opera Mini √ ** ✘ ✘ Safari (Desktop and iOS) √ * ✘ ✘ iOS Webview (Chrome, Firefox, others) √ * ✘ ✘

* alt 需要一定的宽度，否则不会显示
** 字体无法设置样式

小结

For browsers that don’t support the pseudo-elements, the styles applied are ignored, so they don’t interfere in a breaking way. This means that we can still apply the styles and serve a more pleasant experience for users on a supporting browser.

总结就是一句，这个用法是可以完美降级的，大家放心使用！

原文地址：Styling Broken Images

英文不好，第一次翻译文章，大家见谅。