打開電腦，感覺沒有什么事可做，就隨便拿起《css mastery》翻了下，剛好看倒圖像替換這塊，突然想起前些天曾有一網(wǎng)友問過該問題，就想總結(jié)出來，以便自己和網(wǎng)友今后參考。

正式進(jìn)入使用方法總結(jié)之前，我們需要先理清幾個(gè)概念，1.二者的區(qū)別：隱藏文字是要把你不需要顯示的文字隱藏掉,可能因?yàn)樗恋K美觀或暫時(shí)不需要顯示，也就表明此時(shí)文字的視覺可視性和物理空間存在性都沒有；而圖象替換就是用設(shè)計(jì)好的圖片以背景的方式取代文字，目的是為了使用戶有更好的視覺享受，因?yàn)樵O(shè)計(jì)人員對(duì)文字只有有限的選擇能力，但如果不寫文字而直接使用背景圖象又對(duì)搜索引擎不大友好，故而發(fā)明了圖象替換。可能這會(huì)有些朋友有這樣的疑問：為什么不直接用<img />標(biāo)簽?zāi)兀窟@就涉及到標(biāo)準(zhǔn)中的分離了，在標(biāo)準(zhǔn)中只有數(shù)據(jù)才應(yīng)該直接寫到Xhtml中，很顯然這兒的圖片只能算作表現(xiàn)，因此，圖象替換中文字雖然是不可見的，但它的物理空間仍然存在。2.什么時(shí)候該用圖象替換？由于圖象替換技術(shù)在關(guān)閉圖象且打開CSS的情況下將出現(xiàn)內(nèi)容空白，所以應(yīng)當(dāng)盡可能避免使用它，當(dāng)然如果文字需要使用特定字體，且不是很重要的信息時(shí)可以考慮使用。我特別想提及的是logo到底該不該應(yīng)用圖象替換？我認(rèn)為logo(既非banner也非標(biāo)題)是應(yīng)當(dāng)作為數(shù)據(jù)出現(xiàn)的，因?yàn)樗且粋€(gè)站點(diǎn)的標(biāo)志。好了，言歸正傳，開始列舉常用方法。

先說CSS隱藏文字的幾種常用方法，并順便解釋下各自的優(yōu)缺點(diǎn)：

1.display:none：它可以使包括容器本身在內(nèi)的東西都消失，簡便且有效，但它有兩個(gè)耳熟能詳?shù)娜毕荩蔷褪菍?duì)搜索引擎不友好，且被屏幕閱讀器所忽略。

2.text-indent:-9999px：text-indent是首行縮進(jìn)，所以對(duì)于多行文本，若單獨(dú)使用它就有明顯的不足，需加上white-space:nowrap;來彌補(bǔ)不足，但還有一個(gè)問題：物理空間仍然存在，故還需設(shè)置line-height:0;或使用超小字體(在IE下有點(diǎn)BUG)，最終代碼如下:

代碼:

以下為引用的內(nèi)容：
.texthidden{
text-indent:-9999px;
white-space:nowrap;
line-height:0;}

3.overflow:hidden：這是一個(gè)比較合理且我最喜歡的方法，具體代碼如下:

代碼:

以下為引用的內(nèi)容：
.texthidden{
display:block;/*統(tǒng)一轉(zhuǎn)化為塊級(jí)元素*/
overflow:hidden;
width:0;
height:0;}

附加：positon:absolute：

用絕對(duì)定位將其推出可視區(qū)，不過雖然可視性不存在，但仍占據(jù)物理空間，與隱藏文字的宗旨相背，代碼請(qǐng)看:

代碼:

以下為引用的內(nèi)容：
.texthidden{
positon:absolute;
margin-top:-9999px;
margin-left:-9999px;}

下來列舉圖象替換的流行技術(shù)，希望可以幫助你更好地掌握它們并了解各自的局限性：