應該如何用css把文字換成圖片?

如果能把表現用(不重要的或者裝飾用的)的圖片全放在css中是最好的,因為這樣能夠輕易替換更新過的圖片,但卻不用更改標記源代碼.同樣,我們也能確保所有瀏覽器和設備能正確解析標記源代碼的意義,不管有沒有完全支持把文字替換成圖片的進階css.在這本書中一直強調這樣的優勢.

沒有完美的解決方案

然而,尋找單純使用css將文字置換成圖片的"完美"方式幾乎跟尋找圣杯沒啥兩樣…因為現在還不存在.僅有能在所有瀏覽器中正常運作的方法,但是它無法配合輔助程序(比如屏幕閱讀器)使用.還有其他能奏效的方法,除非使用者指定瀏覽器不顯示任何圖片,但又啟用css.

雖然在這段文字撰寫的時候還沒有能夠滿足所有人(或是所有使用者)的方法,但是這類方法現在的確有不少網站使用.在套用任何圖片置換法的時候都必須特別小心,同時也必須了解它會帶來的副作用.

能用,但是要小心

這就是本章的目的,屆時圖片置換帶來的便利性,但是相對的也會揭露它的缺點,隨著時間的發展,或許會有更多css狂熱者發現能夠做出相同效果的更好方法;在那之前,我們必須善用其中的技巧,衡量得失.

為了讓你熟悉圖片置換的概念,讓我們看看幾種常用的方法.先從fahrner圖片替換技巧談起(fahrner image replacement;fir).