CSS裝飾加載失敗的圖片（譯）

原文來自http://bitsofco.de/styling-broken-images/
翻譯工做有本人擔任，轉載請註明出處。

但它們不是必須這樣，咱們能夠使用CSS去修飾<img>，由此對加載失敗的圖片賦予好看的樣式。

兩個關於<img>標籤的表現

爲了理解咱們怎樣裝飾加載失敗的圖片，咱們須要先了解兩個關於<img>元素的行爲表現。
咱們能夠給img添加字體樣式，那些樣式會被施加到alt屬性中的替代文字裏。若是圖片正常顯示，那麼文字將不會出現。

<img>元素是一個替換元素（樣式和尺寸會被外部資源替代）。由於圖片會被替代，那麼<img>上的:before和:after這樣的僞元素就不會成功顯示，可是若是圖片未加載成功，那麼這些僞元素就會顯示出來。

由於這些特性，咱們能夠給那些未成功加載的<img>元素添加一些樣式，當圖未加載成功的時候，樣式能夠顯現；若是加載成功，對圖片也不會有影響。

來，試試吧

用咱們知道的兩條特性，咱們作了一些例子來裝飾未加載的圖片。

先看看html

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

添加一些有效內容

咱們能夠經過使用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文字，經過定位僞元素，使它覆蓋在alt文字上。

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;
}

其餘樣式

經過替代一些本地信息，咱們能夠使用僞元素更好地修飾未成功加載的圖片

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;
}

瀏覽器兼容狀況

遺憾的是，有一些瀏覽器仍是沒法兼容這樣的問題。雖然有些瀏覽器當圖片未加載成功是沒法正常顯示僞元素的內容，可是這並不影響咱們使用。小夥伴們快嘗試起來吧！

後話

如對個人文章感興趣，請關注微信公衆號「每日前端」，天天分享一篇優質前端文章。