本片文章翻譯自 Styling Broken Images 翻譯過(guò)程中可能會(huì)在原意不變的基礎(chǔ)上有些細(xì)微改動(dòng)，望讀者見(jiàn)諒

加載失敗的圖片是比較丑陋的，比如

但是我們可以讓結(jié)果變得更美好。通過(guò)給電腦培訓(xùn),計(jì)算機(jī)培訓(xùn),平面設(shè)計(jì)培訓(xùn),網(wǎng)頁(yè)設(shè)計(jì)培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開(kāi)發(fā)培訓(xùn)元素設(shè)置CSS相關(guān)屬性可以實(shí)現(xiàn)更美的呈現(xiàn)。

IMG元素你需要知道的兩點(diǎn)知識(shí)

  1. 我們可以針對(duì)IMG元素設(shè)置排版相關(guān)的CSS樣式（諸如font等屬性）。一旦IMG的可替換文本（即alt屬性）出現(xiàn)，則設(shè)置的CSS樣式應(yīng)用于這些文本；

  2. IMG元素屬于可替換元素（可替換元素是指元素的外觀和大小受外部源所影響，常見(jiàn)的可替換元素如IMG，OBJECT，INPUT，TEXTAREA等）。正由于可替換元素收外部源的影響，因此CSS中的偽元素::before、::after對(duì)它不起作用。但是，一旦圖片加載失敗，偽元素就可作用于圖片之上。

理解了上述兩點(diǎn)，我們就可以用CSS實(shí)現(xiàn)一個(gè)特殊的功能：

當(dāng)圖片正常加載時(shí)無(wú)需處理，而當(dāng)加載失敗時(shí)讓圖片應(yīng)用一些特殊的樣式，以達(dá)到更好的用戶(hù)體驗(yàn)效果。

實(shí)踐

采用如下的實(shí)例代碼：

<img src="http://nopic.jpg" alt="休要胡說(shuō)">