用CSS實現圖片替換文字(Image replacement)_Div+CSS教程

不論是對瀏覽者還是對搜索引擎，文字都是最佳的頁面內容展示方式，但是，由于字體等原因的限制，純文字的展示漸漸無法滿足愛美的設計師的要求。

于是，出現了通過 CSS 來實現用圖片替換文字的方法，這種方式既能實現頁面上各種豐富的效果，又能滿足搜索引擎優化的需要。因此，深受網頁設計師的喜愛，本文介紹了幾種常見的圖文替換技術。

• Fahrner Image Replacement (FIR)
• Phark 的方法
• Gilder/Levin 的方法 (推薦)

Fahrner Image Replacement (FIR)
這是最早出現的圖文替換技術，是由 Todd Fahrner 提出的，非常容易理解：

HTML 代碼：

<h2>     <span>Hello World</span> </h2> 

CSS 代碼：

<style type="text/css"> h2 {     background:url(hello_world.gif) no-repeat;     width: 150px;     height: 35px; } span {     display: none; } </style> 

代碼非常明白：先將圖片應用在 H2 的背景中，然后將 SPAN 的標簽隱藏。但是這種方式有個問題，就是當圖片無法顯示時，將導致這個區域沒有任何內容。同時，使用 display:none 的方式隱藏的內容，將被許多主流屏幕閱讀器忽略，從而造成可用性問題，因此，應該盡量避免使用。

Phark 的方法

這種技術是由 Mike Rundle 提出的，好處是不需要額外的標簽：

HTML 代碼：

 <h2> Hello World </h2> 

CSS 代碼：

<style type="text/css"> h2 {     text-indent: -5000px;     background:url(hello_world.gif) no-repeat;     width: 150px;     height:35px; } </style> 

代碼也非常簡單，通過文本縮進，將文字隱藏，但是，當圖片無法顯示時，依然存在 FIR 的問題。

 Gilder/Levin 的方法

這種技術是由 Tom Gilder 和 Levin Alexander 共同提出的，這也許是一個最完善的圖文替換技術了：

HTML 代碼：

 <h2>     <span></span>Hello World </h2> 

CSS 代碼：

<style type="text/css"> h2 {     width: 150px;     height: 35px;     position: relative; } h2 span {     background: url(hello_world.gif) no-repeat;     position: absolute;     width: 100%;     height: 100%; } </style> 

首先，將 H2 的 position 設為 relative ，這樣將使 H2 里面的元素定位以 H2 為參照，然后將 SPAN 元素絕對定位，撐滿整個 H2 區域，同時將背景圖應用在 SPAN 標簽里面；這種方法的原理是將 SPAN 標簽覆蓋在文字內容上面，一旦 SPAN 里面的背景圖無法顯示，將顯示下層的文字內容，不影響正常使用。但是，此方法也有一個缺陷，就是背景圖不能透明，否則將透出下面的文字。