深入分析網(wǎng)頁CSS隱藏文字和以圖換字技術(shù)
2024-07-11 08:43:45
供稿：網(wǎng)友
打開電腦，感覺沒有什么事可做，就隨便拿起《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)的東西都消失，簡(jiǎn)便且有效，但它有兩個(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ù)，希望可以幫助你更好地掌握它們并了解各自的局限性：
1.display:none：此處使用該方法時(shí)，需要多添加一層額外的無語義的結(jié)構(gòu)(此處用了span)來應(yīng)用display:none;，即<h1><span>標(biāo)題/span></h1>,再加上上述的缺陷，所以最好不使用該技術(shù)。
2.text-indent:-9999px：隱藏文字中已經(jīng)都說了，只需在代碼中去除line-height:0;,再添加background:url();即可，但text-indent:-9999px;在不同的瀏覽器存在差異，比如在IE5下就常會(huì)出現(xiàn)背景顯示不出來或是滯后問題，不過總的來說，在圖象替換方面它還是一個(gè)不錯(cuò)的方法。
3.overflow:hidden：這依舊是一個(gè)我最喜歡的方法，但合不合理卻不敢妄言，具體代碼如下：
代碼:
以下為引用的內(nèi)容：
.replacement{
display:block;/*統(tǒng)一轉(zhuǎn)化為塊級(jí)元素*/
overflow:hidden;
width:300px;
height:100px;
padding:100px 0 0;
background:url();}
若需要替換一個(gè)帶鏈接的文字(即a出現(xiàn)在文字標(biāo)簽中)，則需要對(duì)代碼稍做些改動(dòng)，具體代碼如下:
代碼:
以下為引用的內(nèi)容：
.replacement,.replacement a{
display:block;/*統(tǒng)一轉(zhuǎn)化為塊級(jí)元素*/
overflow:hidden;
width:300px;
height:100px;}
.replacement a{
padding:100px 0 0;
background:url();}
對(duì)于該代碼需要注意的是，必須在父級(jí)標(biāo)簽中加一個(gè)overflow:hidden；,因?yàn)樵贗E下會(huì)出現(xiàn)一個(gè)小bug:a的內(nèi)容沒辦法溢出隱藏。
附加：positon:absolute：以上三種替換方法都有一個(gè)共同的缺陷，那就是：如果瀏覽器禁止顯示圖片且打開CSS或者用閱讀器之類的話會(huì)造成用戶無法接受信息。為了解決這一問題，在《css mastery》一書中，給我們提出了這樣一種方法：將一個(gè)圖象覆蓋在文字上而非隱藏文本，代碼請(qǐng)看：
代碼:
以下為引用的內(nèi)容：
<style type="text/css">
h2{
positon:relative;
width:300px;
height:100px;}
h2 span{
positon:absolute;
width:100%;
height:100%;
background:url();}
</style>
<h2>
<span></span>晉西浪子
</h2>
當(dāng)然它也有缺陷，比如，添加了一層額外的無語義的結(jié)構(gòu)(比display:none內(nèi)的更加沒有意義)，還有它必須使用具有實(shí)色背景的圖象。
