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

forsigner 發布于2019-08-30 12:51 / 3323人閱讀

摘要：通過替換默認的替代文字我們可以通過偽元素去替代文字，通過定位偽元素，使它覆蓋在文字上。其他樣式通過替代一些本地信息，我們可以使用偽元素更好地修飾未成功加載的圖片瀏覽器兼容情況遺憾的是，有一些瀏覽器還是無法兼容這樣的問題。

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

但它們不是必須這樣，我們可以使用CSS去修飾，由此對加載失敗的圖片賦予好看的樣式。

兩個關于標簽的表現

為了理解我們怎樣裝飾加載失敗的圖片，我們需要先了解兩個關于元素的行為表現。
我們可以給img添加字體樣式，那些樣式會被施加到alt屬性中的替代文字里。如果圖片正常顯示，那么文字將不會出現。

元素是一個替換元素（樣式和尺寸會被外部資源替代）。因為圖片會被替代，那么上的:before和:after這樣的偽元素就不會成功顯示，但是如果圖片未加載成功，那么這些偽元素就會顯示出來。

因為這些特性，我們可以給那些未成功加載的元素添加一些樣式，當圖未加載成功的時候，樣式可以顯現；如果加載成功，對圖片也不會有影響。

來，試試吧

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

先看看html

添加一些有效內容

我們可以通過使用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;
}

瀏覽器兼容情況

遺憾的是，有一些瀏覽器還是無法兼容這樣的問題。雖然有些瀏覽器當圖片未加載成功是無法正常顯示偽元素的內容，但是這并不影響我們使用。小伙伴們快嘗試起來吧！

后話

如對我的文章感興趣，請關注微信公眾號“每日前端”，每天分享一篇優質前端文章。

云服務器 GPU云服務器加載css失敗服務器圖片加載失敗 linux圖片的加載 js實現數據的懶加載圖片

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115112.html

【譯】一個小時搭建一個全棧Web應用框架（下）——美化與功能

摘要：點擊直達前文譯一個小時搭建一個全棧應用框架上如果沒有，但還是要繼續學習本教程，可以到我的頁面下載代碼。從服務器返回隨機語言的每當我們與服務器上的端點進行通話時，為了能夠請求一個隨機的歐洲語言，必須更改文件中的功能。翻譯：瘋狂的技術宅原文標題：Creating a full-stack web application with Python, NPM, Webpack and Reac...

Luosunce 2019-08-20 19:05 評論0 收藏0
【譯】一個小時搭建一個全棧Web應用框架（下）——美化與功能

摘要：點擊直達前文譯一個小時搭建一個全棧應用框架上如果沒有，但還是要繼續學習本教程，可以到我的頁面下載代碼。從服務器返回隨機語言的每當我們與服務器上的端點進行通話時，為了能夠請求一個隨機的歐洲語言，必須更改文件中的功能。翻譯：瘋狂的技術宅原文標題：Creating a full-stack web application with Python, NPM, Webpack and Reac...

Cheng_Gang 2019-07-30 14:35 評論0 收藏0
[譯]如何構建自己的Progressive Image Loader

摘要：最后，我們必須調用函數來檢查所有的漸進式圖片容器在首次運行時是否在頁面上可見。我們還必須在滾動頁面或調整瀏覽器大小時調用函數，在一些舊的瀏覽器主要指可以非常迅速地對這些事件作出回應，所以我們需要限制回調，以確保它不能在毫秒內被再一次調用。你可以在Facebook和Medium上遇到過漸進式圖片，當頁面滾動到視圖時，模糊的低分辨率圖像會被清晰的全分辨率版本替換。 showImg(htt...

cartoon 2019-08-29 12:14 評論0 收藏0
SegmentFault 技術周刊 Vol.38 - 神奇的 CSS

摘要：層疊即表示允許以多種方式來描述樣式，一個元素可以被渲染呈現出多種樣式。可以讓屬性的變化過程持續一段時間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個改變是立即生效的，使用后，將按一個曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...

elliott_hu 2019-08-29 13:56 評論0 收藏0