武林網(www.survivalescaperooms.com)文章簡介：偽元素與圖片替換。

WeBrebuild年會上分享的一點內容，知識點的內容就不作過多闡述了，如果你完全不了解偽元素那么建議先看一下官方偽元素選擇器的資料，或者自行谷歌了解，有興趣可以去看下這篇文章：使用偽元素實現CSS圖片替換（NIR），對于圖片替換有比較詳細的介紹和追溯 。

先看一下通用的圖片替換方法：Demo1

什么問題呢，文字被隱藏了，直接導致的結果就是當圖片加載失敗或者網速慢圖片無法很快加載的時候，用戶不知道這塊區域的內容是什么，有什么功能。

為了避免出現這樣的狀況，文字就不能被隱藏，圖片也不能直接定義成元素的背景圖片，而需要另外一個標簽來包含圖片進而覆蓋文字。

在IE6/7和低版本的chrome、FF等瀏覽器里確實是這樣，但在對偽元素選擇器完美支持的瀏覽器下，我們只需要讓偽元素來完成這個工作。

使用偽元素來實現圖片替換有兩種方法：

1、利用content將圖片直接放到偽元素選擇器里，看Demo2

2、絕對定位偽元素，將圖片定義成背景Demo3

兩種方法的利弊對比：

最后做了個針對IE6/7使用文字隱藏，IE8和高級瀏覽器使用偽元素的漸進增強 偽元素圖片替換Demo

如果你的項目中有對IE另外書寫CSS文件可以把CSS分離開來，這里我直接使用hack完成了這個工作。

實際項目中還是依照情況選擇最優的方法來處理，對于比較重要的內容可以采用添加空標簽的方法，這樣即使在低版本IE中圖片加載出現問題了也能保證內容。

有興趣也可以看下圖片引用錯誤的Demo：Demo-noimages

相關參考鏈接：

Pseudo-Elements Selectors 偽元素選擇符