上一篇CSS教程 文章：CSS高級技巧:CSS Sprites
圖像替換技術(shù)有相當(dāng)?shù)挠锰? 特別是注重視覺的設(shè)計, 而且在一定程度上也不會影響非可視化瀏覽器的用戶群(屏幕閱讀器).
本節(jié)用到的圖片只有一個:
經(jīng)典FIR
在文字外包上一組span標(biāo)簽, 并在CSS中將這個span進(jìn)行display:none 操作, 使其隱藏, 然后在原文字的容器的CSS中加上background-image, 以達(dá)到圖像替換.
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 的容器, 會導(dǎo)致那部分用戶無法得知當(dāng)前的文字內(nèi)容, 而且需要一個完全沒有語義的span標(biāo)簽完成這個效果. 在關(guān)閉圖像, 啟用CSS的情況下, 用戶得不到該有的內(nèi)容. 單像素<img>替換
與經(jīng)典FIR類似, 用span將文字隱藏, 并且在span外, 原父容器中加上一個1像素透明圖片, 并且將被隱藏的文字加到該圖片的alt屬性中, 利用在圖片不可用的情況下, 使用alt中的文字替換圖像的原理, 使用戶在關(guān)閉圖像, 啟用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;}

缺點:
無語義標(biāo)簽. Radu 方法
與Phark方法類似, 通過賦予文字一個外補丁來達(dá)到隱藏的效果. 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;}

缺點:
同樣無法在關(guān)閉圖像,開啟CSS的情況下無法獲取內(nèi)容. Leahy/Langridge 方法
利用 overflow:hidden 以及 padding 的特性,將文字達(dá)到隱藏的效果.
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;
}

缺點:
同樣在關(guān)閉圖像,開啟CSS的情況下無法獲取內(nèi)容, 而且由于IE的Box原型問題, 需要用到Hack. 詳見譯文. Phark 方法
利用 text-indent 的特性來達(dá)到隱藏文字的效果.
HTML代碼如下:

<h3 id="header">
Revised Image Replacement
</h3>

CSS代碼大致如下:

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

缺點:
同樣不能顯示在關(guān)閉圖像,開啟CSS的情況下, 而且無法在IE5中運行. Phark 方法2
修復(fù)了Phark 1中Safari顯示滾動條的問題, 和IE5中無法運行的問題.
HTML代碼如下:

<h3 id="header">
Revised Image Replacement
</h3>

CSS代碼大致如下:

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

缺點:
同樣不能顯示在: 關(guān)閉圖像,開啟CSS的情況下. Dwyer 方法
經(jīng)典FIR的一種變體, 利用overflow:hidden 的特性, 使得所有設(shè)備都能獲取信息, 包括非可視化瀏覽器.
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;}

缺點:
同樣的不能顯示在: 關(guān)閉圖像,開啟CSS的情況下, 仍舊需要額外的無語義的span標(biāo)簽. 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%;}

缺點:
使用完全空白的非語義標(biāo)簽span, 替換用圖片如果是透明背景的話, 文字沒辦法被隱藏. Lindsay 方法
Lindsay將文字設(shè)置為1px, 并將文字顏色設(shè)置成替換用圖片背景的顏色.
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;
}

缺點:
只能用在純色背景的替換用圖片的情況下, 而且在關(guān)閉圖像 開啟CSS的情況下同樣無法獲取信息. Shea 加強版
Shea為容器加上了title屬性, title中包含將被隱藏的文字, 通過這種方法來達(dá)到一種鼠標(biāo)激活工具提示的一種效果來讓用戶獲取信息.
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標(biāo)簽...
以上幾乎是現(xiàn)存所有的圖像替換方法, 各有優(yōu)缺點, 按照自己的情況選用吧.
下一篇CSS教程 文章：CSS高級技巧:滑動門

最新評論