圖像替換技術非常強大且很快開始流行——若是沒有它，我們甚至都無法建立禪意花園。該技術可以說是實現復雜、靈活CSS布局的一塊最為重要基石。
由此可以見圖像替換的重要。

也許你會說直接放一副圖片或加上背景不行嗎？為什么要寫上文本有把文本隱藏呢？這不是多此一舉嗎？這樣做確實能達到一樣的視覺效果，但對搜索引擎是不利的。因為搜索引擎不能從這塊地方的到任何內容，它就不知道這塊地方要表達什么意思。而使用圖像替換技術對搜索引擎就很友好。在引用《CSS禪意花園》中的一段：

圖像替換技術使用display:none的本意并不只是想要替換文本，這樣做還有一些更深層次的理由。實際上，若是沒有任何提示或幫助，計算機就無法認出或讀取圖像中包含的文字。例如HTML中img元素，若是沒有了alt屬性，那么對于google等搜索引擎，以及輔助瀏覽設備（例如，屏幕閱讀器即可閱讀頁面內容，并以聲音的形式告訴瀏覽者）之類無法呈現圖像的客戶端來說，將變的豪無意義。而圖像替換技術則保留了被替換元素中的原有文本，因此無論對任何客戶而言，理解頁面內容都不成問題。
直接使用圖像或背景是傳統表格布局使用的方法，而圖像替換是CSS布局使用的方法。這又一次證明了CSS布局的網站更有優點。

Levin的方案：
Levin Alexander想出了一個絕妙的注意：不再將文本置放于span中，而是將其從span中移出來，將文本和span一起放在父元素中，然后使用這個空白的span覆蓋文本，并將背景圖像應用到span之上。如果一切順利的話，屏幕閱讀器即可正常訪問這段文本，切也充分考慮并解決了瀏覽器禁用圖像后空白頁面的可訪問性問題了。但新的問題也隨之出現，那就是圖像不能是透明的，否則用戶將會看到下面的文本。切這種方案所需要的CSS代碼極為冗長，讓人難以理解。

HTML代碼：

XML/HTML Code復制內容到剪貼板

<h3 class="replace" id="myh1">And a dash of Thyme.<span></span></h3>  

CSS代碼：

CSS Code復制內容到剪貼板

.replace{   
position:relative;   
margin:0;   
padding:0;   
}   
.replace span{   
display:block;   
position:absolute;   
top:0;   
left:0;   
z-index:1;   
}   
#myh1,#myh1 span{   
height:25px;   
width:300px;   
background:url(thyme.png);   
}  

優點：屏幕閱讀器可正常訪問；解決瀏覽器禁用圖片后空白頁面的可訪問性問題。