DIV CSS 佈局教程網

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

正式進入使用方法總結之前，我們需要先理清幾個概念，1.二者的區別：隱藏文字是要把你不需要顯示的文字隱藏掉,可能因為它妨礙美觀或暫時不需要顯示，也就表明此時文字的視覺可視性和物理空間存在性都沒有；而圖象替換就是用設計好的圖片以背景的方式取代文字，目的是為了使用戶有更好的視覺享受，因為設計人員對文字只有有限的選擇能力，但如果不寫文字而直接使用背景圖象又對搜索引擎不大友好，故而發明了圖象替換。可能這會有些朋友有這樣的疑問：為什麼不直接用<img />標簽呢？這就涉及到標准中的分離了，在標准中只有數據才應該直接寫到XHtml中，很顯然這兒的圖片只能算作表現，因此，圖象替換中文字雖然是不可見的，但它的物理空間仍然存在。2.什麼時候該用圖象替換？由於圖象替換技術在關閉圖象且打開CSS的情況下將出現內容空白，所以應當盡可能避免使用它，當然如果文字需要使用特定字體，且不是很重要的信息時可以考慮使用。我特別想提及的是logo到底該不該應用圖象替換？我認為logo(既非banner也非標題)是應當作為數據出現的，因為它是一個站點的標志。好了，言歸正傳，開始列舉常用方法。

先說CSS隱藏文字的幾種常用方法，並順便解釋下各自的優缺點：

1.display:none：它可以使包括容器本身在內的東西都消失，簡便且有效，但它有兩個耳熟能詳的缺陷，那就是對搜索引擎不友好，且被屏幕閱讀器所忽略。

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

代碼:

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

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

代碼:

以下為引用的內容：
.texthidden{
 display:block;/*統一轉化為塊級元素*/
 overflow:hidden;
 width:0;
 height:0;}

附加：positon:absolute：

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

代碼:

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

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

1.display:none：此處使用該方法時，需要多添加一層額外的無語義的結構(此處用了span)來應用display:none;，即<h1><span>標題/span></h1>,再加上上述的缺陷，所以最好不使用該技術。

2.text-indent:-9999px：隱藏文字中已經都說了，只需在代碼中去除line-height:0;,再添加background:url();即可，但text-indent:-9999px;在不同的浏覽器存在差異，比如在IE5下就常會出現背景顯示不出來或是滯後問題，不過總的來說，在圖象替換方面它還是一個不錯的方法。

3.overflow:hidden：這依舊是一個我最喜歡的方法，但合不合理卻不敢妄言，具體代碼如下：

代碼:

以下為引用的內容：
.replacement{
 display:block;/*統一轉化為塊級元素*/
 overflow:hidden;
 width:300px;
 height:100px;
 padding:100px 0 0; 
 background:url();}

若需要替換一個帶鏈接的文字(即a出現在文字標簽中)，則需要對代碼稍做些改動，具體代碼如下:

代碼:

以下為引用的內容：
.replacement,.replacement a{
 display:block;/*統一轉化為塊級元素*/
 overflow:hidden;
 width:300px;
 height:100px;}
.replacement a{
 padding:100px 0 0; 
 background:url();}

對於該代碼需要注意的是，必須在父級標簽中加一個overflow:hidden；,因為在IE下會出現一個小bug:a的內容沒辦法溢出隱藏。

附加：positon:absolute：以上三種替換方法都有一個共同的缺陷，那就是：如果浏覽器禁止顯示圖片且打開CSS或者用閱讀器之類的話會造成用戶無法接受信息。為了解決這一問題，在《CSS mastery》一書中，給我們提出了這樣一種方法：將一個圖象覆蓋在文字上而非隱藏文本，代碼請看：

代碼:

以下為引用的內容：
<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>

當然它也有缺陷，比如，添加了一層額外的無語義的結構(比display:none內的更加沒有意義)，還有它必須使用具有實色背景的圖象。