用 CSS 實現圖片替換文字

文章目錄

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

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

於是，出現了通過 CSS 來實現用圖片替換文字的方法，這種方式既能實現頁面上各種豐富的效果，又能滿足搜尋引擎最佳化的需要。因此，深受網頁設計師的喜愛。

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

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

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

Fahrner Image Replacement (FIR)

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

HTML 代碼：
HTML:   

 

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

CSS 代碼
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 代碼：
HTML:

 

  
   
  
 <h2> 
  
 Hello World 
  
 </h2> 
  
   
 

CSS 代碼
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 代碼：HTML:

 

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

CSS 代碼
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 裡面的背景圖無法顯示，將顯示下層的文字內容，不影響正常使用。但是，此方法也有一個缺陷，就是背景圖不能透明，否則將透出下面的文字。