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;}
缺點:
同樣的不能顯示在: 關(guān)閉圖像,開啟CSS的情況下, 仍舊需要額外的無語義的span標簽.
Gilder/Levin 方法
解決了在關(guān)閉圖像 開啟CSS情況下的顯示問題, 并且使得幾乎所有的設(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%;}
缺點:
使用完全空白的非語義標簽span, 替換用圖片如果是透明背景的話, 文字沒辦法被隱藏.
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;
}
缺點:
只能用在純色背景的替換用圖片的情況下, 而且在關(guān)閉圖像 開啟CSS的情況下同樣無法獲取信息.
Shea 加強版
Shea為容器加上了title屬性, title中包含將被隱藏的文字, 通過這種方法來達到一種鼠標激活工具提示的一種效果來讓用戶獲取信息.
HTML代碼如下:
＜h3 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%;}
缺點:
多余的空白無語義span標簽...
以上幾乎是現(xiàn)存所有的圖像替換方法, 各有優(yōu)缺點, 按照自己的情況選用吧.
|
