CSS進階技巧：圖片替換

映像替換技術有相當的用處, 特別是注重視覺的設計, 而且在一定程度上也不會影響非可視化瀏覽器的使用者群(螢幕助讀程式).

本節用到的圖片只有一個:

 

經典FIR

在文字外包上一組span標籤, 並在CSS中將這個span進行display:none 操作, 使其隱藏, 然後在原文字的容器的CSS中加上background-image, 以達到映像替換.

HTML代碼如下:

<h3>
    <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>
    <img src="shim.gif" alt="Revised ImageReplacement" />
    <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>
    Revised Image Replacement
</h3>

CSS代碼大致如下:

#header {background: url(sample-opaque.gif) no-repeat topright;width: 2329px;height: 25px;margin: 0 0 0 -2000px;}

缺點:

同樣無法在關閉映像,開啟CSS的情況下無法擷取內容.

Phark 方法

利用 text-indent 的特性來達到隱藏文字的效果.

HTML代碼如下:

<h3>
    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>
    Revised Image Replacement
</h3>

CSS代碼大致如下:

#header {
    text-indent: -5000px;
    background: url(sample-opaque.gif);
    height: 25px;
 }

缺點:

同樣不能顯示在: 關閉映像,開啟CSS的情況下.

Leahy/Langridge 方法

利用 overflow:hidden 以及 padding 的特性,將文字達到隱藏的效果.

HTML代碼如下:

<h3>
    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. 詳見譯文.

Dwyer 方法

經典FIR的一種變體, 利用overflow:hidden的特性, 使得所有裝置都能擷取資訊, 包括非可視化瀏覽器.

HTML代碼如下:

<h3>
    <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>
    <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>
    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代碼如下:

<h3title="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標籤...

以上幾乎是現存所有的映像替換方法, 各有優缺點, 按照自己的情況選用吧.

 

 

 

無責任猜測：在網上搜到這篇譯文（應該是譯文，因為在mezzolblue.com上找到原文）的時候，並未發現任何原文地址引用，感謝譯者辛勤勞動的同時，在此為英文原文作者補上著作權資訊，請二次轉載者也加上以下這一句吧：

原文地址：http://www.mezzoblue.com/tests/revised-image-replacement/