圖像替換技術非常強大且很快開始流行——若是沒有它，我們甚至都無法建立禅意花園。該技術可以說是實現復雜、靈活CSS布局的一塊最為重要基石。
由此可以見圖像替換的重要。
也許你會說直接放一副圖片或加上背景不行嗎？為什麼要寫上文本有把文本隱藏呢？這不是多此一舉嗎？這樣做確實能達到一樣的視覺效果，但對搜索引擎是不利的。因為搜索引擎不能從這塊地方的到任何內容，它就不知道這塊地方要表達什麼意思。而使用圖像替換技術對搜索引擎就很友好。在引用《CSS禅意花園》中的一段：
圖像替換技術使用display:none的本意並不只是想要替換文本，這樣做還有一些更深層次的理由。實際上，若是沒有任何提示或幫助，計算機就無法認出或讀取圖像中包含的文字。例如Html中img元素，若是沒有了alt屬性，那麼對於google等搜索引擎，以及輔助浏覽設備（例如，屏幕閱讀器即可閱讀頁面內容，並以聲音的形式告訴浏覽者）之類無法呈現圖像的客戶端來說，將變的豪無意義。而圖像替換技術則保留了被替換元素中的原有文本，因此無論對任何客戶而言，理解頁面內容都不成問題。
直接使用圖像或背景是傳統表格布局使用的方法，而圖像替換是CSS布局使用的方法。這又一次證明了CSS布局的網站更有優點。
Levin的方案：
Levin Alexander想出了一個絕妙的注意：不再將文本置放於span中，而是將其從span中移出來，將文本和span一起放在父元素中，然後使用這個空白的span覆蓋文本，並將背景圖像應用到span之上。如果一切順利的話，屏幕閱讀器即可正常訪問這段文本，切也充分考慮並解決了浏覽器禁用圖像後空白頁面的可訪問性問題了。但新的問題也隨之出現，那就是圖像不能是透明的，否則用戶將會看到下面的文本。切這種方案所需要的CSS代碼極為冗長，讓人難以理解。
Html代碼：
XML/Html Code復制內容到剪貼板
CSS代碼：
優點：屏幕閱讀器可正常訪問；解決浏覽器禁用圖片後空白頁面的可訪問性問題。
缺點：無法使用透明圖像；CSS代碼較為冗長。
Leahy和Langridge的方案：
Seamus Leahy和Stuart Langridge均獨立地發現了這種方法。該方法讓我們不必再添加那些多余的<span>標簽，且在保證屏幕閱讀器可以正常閱讀文本的同時，也能在頁面中隱藏元素中的內容。
Html代碼：
XML/Html Code復制內容到剪貼板CSS代碼：
CSS Code復制內容到剪貼板
優點：屏幕閱讀器可正常訪問，沒有多余的<span>。
缺點：並沒有解決浏覽器禁用圖象後空白頁面的可訪問性問題。
Fahrner的方案：
2003年3月，Douglas Bowman在他的網站Stopdesign上發布了一個技巧（www.stopdesign.com/articles/replace_text)，讓設計師能夠用一張背景圖像替代某元素中的文字，以期顯出更美觀的字體。為了表示對發明者Todd Fahrner的尊重，這個技巧隨後也被叫做“Fahrner圖像替換（Fahrner Image Replacement，FIR）”。該技巧實現非常簡單：用span將元素中的文本包圍起來，然後通過應用CSS樣式隱藏這個span中的文本，最後將背景圖像應用到該元素之上即可。例如，對於下面的這一段Html標記：
我們可以使用下面的這段CSS容易地實現圖像替換：
通過使用CSS的display:none或visibility:hidden，所有在#pageHeader元素中的span元素都被隱藏起來。Hellsing同時使用了上述兩種CSS設定——但它們的效果確實一致的。圖像替換技術非常強大且很快開始流行——若是沒有它，我們甚至都無法建立禅意花園。該技術可以說是實現復雜、靈活CSS布局的一塊最為重要基石。
Rundle的方案：
設計師Mike Rundle提出了一中使用負text-indent屬性值的方法，將文本推到屏幕的左邊緣之外，代碼簡潔優雅。
Html代碼：
XML/Html Code復制內容到剪貼板
CSS代碼：
優點：屏幕閱讀器可正常訪問；沒有多余的<span>；簡潔優雅的CSS。
缺點：並沒有解決浏覽器禁用圖像後空白頁面的可訪問性問題。