^{<noscript id="1f3oq"></noscript>}

CSS布局中常用的CSS圖像置換、圖片替代的方法舉例

2024-07-11 08:40:26

字體：大中小

供稿：網(wǎng)友

　　在xhtml CSS網(wǎng)頁布局中，我們很多結(jié)構(gòu)與表現(xiàn)的圖片，都用背景來進(jìn)行操作的。例如欄目的標(biāo)題，我們可以制作一幅圖片，由于是圖片，所以加上裝飾性的圖案紋理，文字字體也可以更加的多樣化。我們常用的方法是background-image: url(http://www.CuoXIn.com/skins/CuoXIn_logo4.png) 但我們需要考慮到兩種情況的發(fā)生：

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

　　2、搜索引擎蜘蛛程序?qū)D片中的文字根本無法辯認(rèn)。它根本不清楚這里描述與表現(xiàn)的是什么。

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

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

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

示例代碼 [www.CuoXIn.com]

上一篇：DOV CSS表單：超炫的單選框與復(fù)選框效果！-Adam

下一篇：用CSS打造評分星級效果的一個實例