圖像替換技術(shù)有相當(dāng)?shù)挠锰? 特別是注重視覺的設(shè)計(jì), 而且在一定程度上也不會(huì)影響非可視化瀏覽器的用戶群(屏幕閱讀器).
本節(jié)用到的圖片只有一個(gè):
經(jīng)典FIR
在文字外包上一組span標(biāo)簽, 并在CSS中將這個(gè)span進(jìn)行display:none 操作, 使其隱藏, 然后在原文字的容器的CSS中加上background-image, 以達(dá)到圖像替換.
HTML代碼如下:
�。糷3 id="header"＞
＜span＞Revised Image Replacement＜/span＞
＜/h3＞
CSS代碼大致如下:
#header {width: 329px;height: 25px;background-image: url(sample-opaque.gif);}
#header span {display: none;}
缺點(diǎn):
屏幕閱讀器會(huì)略過定義 display:none 的容器, 會(huì)導(dǎo)致那部分用戶無(wú)法得知當(dāng)前的文字內(nèi)容, 而且需要一個(gè)完全沒有語(yǔ)義的span標(biāo)簽完成這個(gè)效果. 在關(guān)閉圖像, 啟用CSS的情況下, 用戶得不到該有的內(nèi)容.
單像素＜img＞替換
與經(jīng)典FIR類似, 用span將文字隱藏, 并且在span外, 原父容器中加上一個(gè)1像素透明圖片, 并且將被隱藏的文字加到該圖片的alt屬性中, 利用在圖片不可用的情況下, 使用alt中的文字替換圖像的原理, 使用戶在關(guān)閉圖像, 啟用CSS的情況下也能得到文字信息.
HTML代碼如下:
�。糷3 id="header"＞
＜img src="shim.gif" alt="Revised Image Replacement" /＞
＜span＞Revised Image Replacement＜/span＞
�。�/h3＞
CSS代碼大致如下:
#header {width: 329px;height: 25px;background-image: url(sample-opaque.gif);}
#header span {display: none;}
缺點(diǎn):
無(wú)語(yǔ)義標(biāo)簽.
Radu 方法
與Phark方法類似, 通過賦予文字一個(gè)外補(bǔ)丁來(lái)達(dá)到隱藏的效果. Radu只運(yùn)行于IE5
HTML代碼如下:
�。糷3 id="header"＞
Revised Image Replacement
＜/h3＞
CSS代碼大致如下:
#header {background: url(sample-opaque.gif) no-repeat top right;width: 2329px;height: 25px;margin: 0 0 0 -2000px;}
缺點(diǎn):
同樣無(wú)法在關(guān)閉圖像,開啟CSS的情況下無(wú)法獲取內(nèi)容.
本新聞共 3頁(yè),當(dāng)前在第 1頁(yè) 1 2 3 |
