轉自：http://www.xker.com/page/e2008/0616/53745.html
圖像替換技術有相當的用處, 特別是注重視覺的設計, 而且在一定程度上也不會影響非可視化瀏覽器的用戶羣(屏幕閱讀器).
經典FIR
在文字外包上一組span標籤, 並在CSS中將這個span進行display:none 操作, 使其隱藏, 然後在原文字的容器的CSS中加上background-image, 以達到圖像替換.
HTML代碼如下:
＜h3 id="header"＞
＜span＞Revised Image Replacement＜/span＞
＜/h3＞
CSS代碼大致如下:
#header {width: 329px;height: 25px;background-image: url(sample-opaque.gif);}
#header span {display: none;}
缺點:
屏幕閱讀器會略過定義 display:none 的容器, 會導致那部分用戶無法得知當前的文字內容, 而且需要一個完全沒有語義的span標籤完成這個效果. 在關閉圖像, 啓用CSS的情況下, 用戶得不到該有的內容.
單像素＜img＞替換
與經典FIR類似, 用span將文字隱藏, 並且在span外, 原父容器中加上一個1像素透明圖片, 並且將被隱藏的文字加到該圖片的alt屬性中, 利用在圖片不可用的情況下, 使用alt中的文字替換圖像的原理, 使用戶在關閉圖像, 啓用CSS的情況下也能得到文字信息.
HTML代碼如下:
＜h3 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;}
缺點:
無語義標籤.
Radu 方法
與Phark方法類似, 通過賦予文字一個外補丁來達到隱藏的效果. Radu只運行於IE5
HTML代碼如下:
＜h3 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;}
缺點:
同樣無法在關閉圖像,開啓CSS的情況下無法獲取內容.
Langridge 方法
利用 overflow:hidden 以及 padding 的特性,將文字達到隱藏的效果.
HTML代碼如下:
＜h3 id="header"＞
Revised Image Replacement
＜/h3＞
CSS代碼大致如下:
#header {
padding: 25px 0 0 0;
overflow: hidden;
background-image: url(sample-opaque.gif);
background-repeat: no-repeat;
height: 0px !important;
height /**/:25px;
}
缺點:
同樣在關閉圖像,開啓CSS的情況下無法獲取內容, 而且由於IE的Box原型問題, 需要用到Hack. 詳見譯文.
Phark 方法
利用 text-indent 的特性來達到隱藏文字的效果.
HTML代碼如下:
＜h3 id="header"＞
Revised Image Replacement
＜/h3＞
CSS代碼大致如下:
#header {
text-indent: -100em;
overflow: hidden;
background: url(sample-opaque.gif);
height: 25px;
}
缺點:
同樣不能顯示在關閉圖像,開啓CSS的情況下, 而且無法在IE5中運行.
Phark 方法2
修復了Phark 1中Safari顯示滾動條的問題, 和IE5中無法運行的問題.
HTML代碼如下:
＜h3 id="header"＞
Revised Image Replacement
＜/h3＞
CSS代碼大致如下:
#header {
text-indent: -5000px;
background: url(sample-opaque.gif);
height: 25px;
}
缺點:
同樣不能顯示在: 關閉圖像,開啓CSS的情況下.
Dwyer 方法
經典FIR的一種變體, 利用overflow:hidden 的特性, 使得所有設備都能獲取信息, 包括非可視化瀏覽器.
HTML代碼如下:
＜h3 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;}
缺點:
同樣的不能顯示在: 關閉圖像,開啓CSS的情況下, 仍舊需要額外的無語義的span標籤.
Gilder/Levin 方法
解決了在關閉圖像 開啓CSS情況下的顯示問題, 並且使得幾乎所有的設備都可以獲取到文本信息.
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將文字設置爲1px, 並將文字顏色設置成替換用圖片背景的顏色.
HTML代碼如下:
＜h3 id="header"＞
Revised Image Replacement
＜/h3＞
CSS代碼大致如下:
#header {
background: url(sample-opaque.gif) no-repeat;
width: 329px;
height: 25px;
font-size: 1px;
color: #xxxxxx;
}
缺點:
只能用在純色背景的替換用圖片的情況下, 而且在關閉圖像 開啓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標籤...
以上幾乎是現存所有的圖像替換方法, 各有優缺點, 按照自己的情況選用吧.