圖像替換技術(shù)非常強(qiáng)大且很快開始流行——若是沒有它，我們甚至都無法建立禪意花園。該技術(shù)可以說是實現(xiàn)復(fù)雜、靈活CSS布局的一塊最為重要基石。
由此可以見圖像替換的重要。

也許你會說直接放一副圖片或加上背景不行嗎？為什么要寫上文本有把文本隱藏呢？這不是多此一舉嗎？這樣做確實能達(dá)到一樣的視覺效果，但對搜索引擎是不利的。因為搜索引擎不能從這塊地方的到任何內(nèi)容，它就不知道這塊地方要表達(dá)什么意思。而使用圖像替換技術(shù)對搜索引擎就很友好。在引用《CSS禪意花園》中的一段：

圖像替換技術(shù)使用display:none的本意并不只是想要替換文本，這樣做還有一些更深層次的理由。實際上，若是沒有任何提示或幫助，計算機(jī)就無法認(rèn)出或讀取圖像中包含的文字。例如HTML中img元素，若是沒有了alt屬性，那么對于google等搜索引擎，以及輔助瀏覽設(shè)備（例如，屏幕閱讀器即可閱讀頁面內(nèi)容，并以聲音的形式告訴瀏覽者）之類無法呈現(xiàn)圖像的客戶端來說，將變的豪無意義。而圖像替換技術(shù)則保留了被替換元素中的原有文本，因此無論對任何客戶而言，理解頁面內(nèi)容都不成問題。
直接使用圖像或背景是傳統(tǒng)表格布局使用的方法，而圖像替換是CSS布局使用的方法。這又一次證明了CSS布局的網(wǎng)站更有優(yōu)點(diǎn)。

Levin的方案：
Levin Alexander想出了一個絕妙的注意：不再將文本置放于span中，而是將其從span中移出來，將文本和span一起放在父元素中，然后使用這個空白的span覆蓋文本，并將背景圖像應(yīng)用到span之上。如果一切順利的話，屏幕閱讀器即可正常訪問這段文本，切也充分考慮并解決了瀏覽器禁用圖像后空白頁面的可訪問性問題了。但新的問題也隨之出現(xiàn)，那就是圖像不能是透明的，否則用戶將會看到下面的文本。切這種方案所需要的CSS代碼極為冗長，讓人難以理解。

HTML代碼：

發(fā)表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發(fā)表