[譯] 給破碎圖片添加樣式

原文連接:Styling Broken Images,by Ire Aderinokuncss

若是 <img>src 屬性值是一個無效地址,最終的渲染結果就很醜陋:html

<img src="http://bitsofco.de/broken.jpg" alt="This image is broken! Ugly, isn’t it?">
複製代碼

咱們看到的是一個破碎的圖片(Broken Images):瀏覽器

image.png

<img> 元素上的兩個事實

在理解給破碎圖片添加樣式的方式前,咱們須要先學習 <img> 元素上存在的兩個事實:網絡

  1. 咱們能夠在 <img> 元素上使用常規的排版相關樣式。 這些樣式會被應用到替換文本上(即 alt 屬性值),若是圖片正常顯示了,這些樣式也不會影響圖片的渲染。
  2. <img> 元素是替換元素。 這就表示「該類元素的外觀和尺寸是受到外部資源控制的」(Sitepoint)。由於元素是受到外部資源控制的,所以 ::before::after 僞元素的樣式並不會影響圖片渲染。然而,當圖片由於地址無效或網絡等緣由加載失敗後,僞元素就出現了。

正式基於上面的兩個事實,才讓咱們爲破碎圖片設置樣式成爲可能。函數

擼代碼

咱們仍是基於上面的無效圖片地址,設置樣式:學習

<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;
}
複製代碼

覆蓋默認的替換文本

還有一種方案,就是僞元素絕對定位在替換文本之上,這樣替換文本被遮住,咱們就只能看到僞元素了。字體

img { /* 樣式跟第一個例子裏是同樣的 */ }

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;
}
複製代碼

再進一步設置樣式

除了能夠顯示默認的替換文本信息,咱們還能夠經過僞元素爲破碎圖片進一步添加更細膩的樣式。ui

img { 
  /* 樣式跟第一個例子裏是同樣的,而後加了下面一條樣式 */
  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;
}
複製代碼

若是圖片沒有破裂,僞元素根本不會生成,圖片還能正常顯示。url

<img src="/content/images/2016/02/Screen-Shot-2016-02-27-at-12-42-08.png" alt="Image not broken">
複製代碼

瀏覽器兼容性

不幸的是,並不是全部瀏覽器都以相同的方式處理損壞的圖片。對於某些瀏覽器,即便圖片沒有顯示,僞元素也不會顯示。

下面,是個人測試結果:

image.png

* 只有在圖片的寬度足夠大時,alt 文本纔會顯示出來。若是沒有爲 <img>  指定寬度,alt 文本可能根本就顯示不出來。

** 設置的字體樣式無效。

對於不支持僞元素的瀏覽器,所應用的樣式將被忽略,所以不會形成破壞性干擾。這表示着咱們仍然能夠上面的樣式方案,並在支持的瀏覽器上爲用戶提供更愉快的體驗。

(正文完)


廣告時間(長期有效)

我有一位好朋友開了一間貓舍,在此幫她宣傳一下。如今貓舍裏養的都是布偶貓。若是你也是個愛貓人士而且有須要的話,不妨掃一掃她的【閒魚】二維碼。不買也沒關係,看看也行。

(完)

相關文章
相關標籤/搜索