Dwyer 方法
經(jīng)典FIR的一種變體, 利用overflow:hidden 的特性, 使得所有設(shè)備都能獲取信息, 包括非可視化瀏覽器.
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: block;width: 0;height: 0;overflow: hidden;}
缺點(diǎn):
同樣的不能顯示在: 關(guān)閉圖像,開(kāi)啟CSS的情況下, 仍舊需要額外的無(wú)語(yǔ)義的span標(biāo)簽.
Gilder/Levin 方法
解決了在關(guān)閉圖像 開(kāi)啟CSS情況下的顯示問(wèn)題, 并且使得幾乎所有的設(shè)備都可以獲取到文本信息.
HTML代碼如下:
＜h3 id="header"＞
＜span＞＜/span＞Revised Image Replacement
�。�/h3＞
CSS代碼大致如下:
#header {width: 329px;height: 25px;position: relative;}
#header span {background: url(sample-opaque.gif) no-repeat;position: absolute;width: 100%;height: 100%;}
缺點(diǎn):
使用完全空白的非語(yǔ)義標(biāo)簽span, 替換用圖片如果是透明背景的話(huà), 文字沒(méi)辦法被隱藏.
Lindsay 方法
Lindsay將文字設(shè)置為1px, 并將文字顏色設(shè)置成替換用圖片背景的顏色.
HTML代碼如下:
�。糷3 id="header"＞
Revised Image Replacement
＜/h3＞
CSS代碼大致如下:
#header {
background: url(sample-opaque.gif) no-repeat;
width: 329px;
height: 25px;
font-size: 1px;
color: #xxxxxx;
}
缺點(diǎn):
只能用在純色背景的替換用圖片的情況下, 而且在關(guān)閉圖像 開(kāi)啟CSS的情況下同樣無(wú)法獲取信息.
Shea 加強(qiáng)版
Shea為容器加上了title屬性, title中包含將被隱藏的文字, 通過(guò)這種方法來(lái)達(dá)到一種鼠標(biāo)激活工具提示的一種效果來(lái)讓用戶(hù)獲取信息.
HTML代碼如下:
�。糷3 id="header" title="Revised Image Replacement"＞
＜span＞＜/span＞Revised Image Replacement
�。�/h3＞
CSS代碼如下:
#header {width: 329px;height: 25px;position: relative;}
#header span {background: url(sample-opaque.gif) no-repeat;position: absolute;width: 100%;height: 100%;}
缺點(diǎn):
多余的空白無(wú)語(yǔ)義span標(biāo)簽...
以上幾乎是現(xiàn)存所有的圖像替換方法, 各有優(yōu)缺點(diǎn), 按照自己的情況選用吧.
本新聞共 3頁(yè),當(dāng)前在第 3頁(yè) 1 2 3 |
