在xhtml CSS網頁布局中，我們很多結構與表現的圖片，都用背景來進行操作的。例如欄目的標題，我們可以制作一幅圖片，由于是圖片，所以加上裝飾性的圖案紋理，文字字體也可以更加的多樣化。我們常用的方法是background-image: url(http://m.ghpqjb.com/skins/mb5u_logo4.png) 但我們需要考慮到兩種情況的發生：

　　1、假如訪客在瀏覽網頁時，丟失了css文件，直接顯示了頁面的xhtml標簽。我們的頁面就變的難以讀懂了，因為背景圖片是在css文件中定義了，而此時根本顯示不出來，我們無法閱讀頁面內容。

　　2、搜索引擎蜘蛛程序對圖片中的文字根本無法辯認。它根本不清楚這里描述與表現的是什么。

　　我們就可以通過CSS圖像置換、圖片替代的方法來解決上面的兩個問題。相當于說，欄目的標題我們用背景圖片來表現，當css文件丟失時，可以顯示出文字。當搜索引擎蜘蛛讀取網頁時，也能知道此標簽的內容。也就是讓圖像替換掉文字，美化頁面，更具有兼容性與搜索引擎優化。我們進入主題，下面例舉了一些常用的CSS圖像置換、圖片替代的方法，希望對你有參考意義。本文章由mb5u.com原創！

　　小提示：你可以用Web Developer插件去掉CSS效果來查看丟失css文件時的情況。

一、直接隱藏文字法 display: none


　　直接將h1標簽中的span元素設置成display: none直接隱藏掉，實現了圖像替代的效果。運行效果如下：


二、margin移位法


　　我們將標簽中的span進行了外邊距的設置，距離左部-2000px，在CSS正常發揮作用的時候，當然看不到文字了。實現了圖像替換。看下面的運行效果：


三、文本縮進法text-indent


　　我們將標簽中的文字的文本縮進設置成足夠大的值，并且設置容器h1的overflow的值為hidden。我們也看不到文字了。實現了圖像替換。看下面的運行效果：


四、容器零高度、零寬度的方法


　　我們將h1標簽中文字的容器span設為塊元素，寬度與高度都是零，并且溢出為隱藏。這樣我們就看不到文字了，當css失效時，文字則正常顯示，我們看下面的效果：


五、文字夠小、顏色夠近的方法


　　我們將h1的文字的大小設為1px，顏色設置成與背景圖片接近的顏色，也同樣實現了CSS圖像替換的效果，但此效果需要在特定的背景圖片下才顯得完美，不然就輕易看出來了。我們看下面的運行效果：


　　實現的方法或許不止這一些，你也可以思考如何實現讓圖像代替文字，更好的設計符合web標準思維的網頁作品。本文參考mezzoblue的一些案例。