亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

forsigner / 3397人閱讀

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

原文來(lái)自http://bitsofco.de/styling-broken-images/ 
翻譯工作有本人擔(dān)任，轉(zhuǎn)載請(qǐng)注明出處。

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

兩個(gè)關(guān)于標(biāo)簽的表現(xiàn)

為了理解我們?cè)鯓友b飾加載失敗的圖片，我們需要先了解兩個(gè)關(guān)于元素的行為表現(xiàn)。
我們可以給img添加字體樣式，那些樣式會(huì)被施加到alt屬性中的替代文字里。如果圖片正常顯示，那么文字將不會(huì)出現(xiàn)。

元素是一個(gè)替換元素（樣式和尺寸會(huì)被外部資源替代）。因?yàn)閳D片會(huì)被替代，那么上的:before和:after這樣的偽元素就不會(huì)成功顯示，但是如果圖片未加載成功，那么這些偽元素就會(huì)顯示出來(lái)。

因?yàn)檫@些特性，我們可以給那些未成功加載的元素添加一些樣式，當(dāng)圖未加載成功的時(shí)候，樣式可以顯現(xiàn)；如果加載成功，對(duì)圖片也不會(huì)有影響。

來(lái)，試試吧

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

先看看html 
Kanye Laughing
添加一些有效內(nèi)容

我們可以通過(guò)使用attr( )來(lái)優(yōu)化未成功加載的圖片的顯示。

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

通過(guò)替換默認(rèn)的替代文字

我們可以通過(guò)偽元素去替代alt文字，通過(guò)定位偽元素，使它覆蓋在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;
}

其他樣式

通過(guò)替代一些本地信息，我們可以使用偽元素更好地修飾未成功加載的圖片

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

瀏覽器兼容情況

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

后話 
如對(duì)我的文章感興趣，請(qǐng)關(guān)注微信公眾號(hào)“每日前端”，每天分享一篇優(yōu)質(zhì)前端文章。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/115112.html

相關(guān)文章

  • 【譯】一個(gè)小時(shí)搭建一個(gè)全棧Web應(yīng)用框架（下）——美化與功能

    摘要：點(diǎn)擊直達(dá)前文譯一個(gè)小時(shí)搭建一個(gè)全棧應(yīng)用框架上如果沒(méi)有，但還是要繼續(xù)學(xué)習(xí)本教程，可以到我的頁(yè)面下載代碼。從服務(wù)器返回隨機(jī)語(yǔ)言的每當(dāng)我們與服務(wù)器上的端點(diǎn)進(jìn)行通話時(shí)，為了能夠請(qǐng)求一個(gè)隨機(jī)的歐洲語(yǔ)言，必須更改文件中的功能。 翻譯：瘋狂的技術(shù)宅原文標(biāo)題：Creating a full-stack web application with Python, NPM, Webpack and Reac...

    Luosunce 評(píng)論0 收藏0

  • 【譯】一個(gè)小時(shí)搭建一個(gè)全棧Web應(yīng)用框架（下）——美化與功能

    摘要：點(diǎn)擊直達(dá)前文譯一個(gè)小時(shí)搭建一個(gè)全棧應(yīng)用框架上如果沒(méi)有，但還是要繼續(xù)學(xué)習(xí)本教程，可以到我的頁(yè)面下載代碼。從服務(wù)器返回隨機(jī)語(yǔ)言的每當(dāng)我們與服務(wù)器上的端點(diǎn)進(jìn)行通話時(shí)，為了能夠請(qǐng)求一個(gè)隨機(jī)的歐洲語(yǔ)言，必須更改文件中的功能。 翻譯：瘋狂的技術(shù)宅原文標(biāo)題：Creating a full-stack web application with Python, NPM, Webpack and Reac...

    Cheng_Gang 評(píng)論0 收藏0

  • [譯]如何構(gòu)建自己的Progressive Image Loader

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

    cartoon 評(píng)論0 收藏0

  • SegmentFault 技術(shù)周刊 Vol.38 - 神奇的 CSS

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

    elliott_hu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<