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

于是，出現(xiàn)了通過 CSS 來實(shí)現(xiàn)用圖片替換文字的方法，這種方式既能實(shí)現(xiàn)頁面上各種豐富的效果，又能滿足搜索引擎優(yōu)化的需要。因此，深受網(wǎng)頁設(shè)計(jì)師的喜愛，本文介紹了幾種常見的圖文替換技術(shù)。

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

Fahrner Image Replacement (FIR)
這是最早出現(xiàn)的圖文替換技術(shù)，是由 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> 

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

Phark 的方法

這種技術(shù)是由 Mike Rundle 提出的，好處是不需要額外的標(biāo)簽：

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> 

代碼也非常簡單，通過文本縮進(jìn)，將文字隱藏，但是，當(dāng)圖片無法顯示時(shí)，依然存在 FIR 的問題。

 Gilder/Levin 的方法

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

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 設(shè)為 relative ，這樣將使 H2 里面的元素定位以 H2 為參照，然后將 SPAN 元素絕對(duì)定位，撐滿整個(gè) H2 區(qū)域，同時(shí)將背景圖應(yīng)用在 SPAN 標(biāo)簽里面；這種方法的原理是將 SPAN 標(biāo)簽覆蓋在文字內(nèi)容上面，一旦 SPAN 里面的背景圖無法顯示，將顯示下層的文字內(nèi)容，不影響正常使用。但是，此方法也有一個(gè)缺陷，就是背景圖不能透明，否則將透出下面的文字。