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

教程Tag：暫無Tag,歡迎添加,賺取U幣!

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

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

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

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

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

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

示例代碼 [m.dounai2.com]

<h1 id="header">
<span>MB5U.com - CSS Web Design</span>
</h1>
#header {
width: 200px;
height: 90px;
background-image: url(http://m.dounai2.com/skins/mb5u_logo4.png);
}
#header span {
display: none;
}

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

代碼調(diào)試框 [m.dounai2.com]

[ 可先修改部分代碼再運行查看效果 ]

二、margin移位法

示例代碼 [m.dounai2.com]

<h1 id="header">
<span>MB5U.com - CSS Web Design</span>
</h1>
#header {
width: 200px;
height: 90px;
background-image: url(http://m.dounai2.com/skins/mb5u_logo4.png);
}
#header span { margin: 0 0 0 -2000px; }

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

代碼調(diào)試框 [m.dounai2.com]

[ 可先修改部分代碼再運行查看效果 ]

三、文本縮進法text-indent

示例代碼 [m.dounai2.com]

<h1 id="header">
MB5U.com - CSS Web Design
</h1>
#header {
width: 200px;
height: 90px;
background-image: url(http://m.dounai2.com/skins/mb5u_logo4.png);
text-indent: -200em;
overflow: hidden;
}

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

代碼調(diào)試框 [m.dounai2.com]

[ 可先修改部分代碼再運行查看效果 ]

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

示例代碼 [m.dounai2.com]

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

代碼調(diào)試框 [m.dounai2.com]

[ 可先修改部分代碼再運行查看效果 ]

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

示例代碼 [m.dounai2.com]

<h1 id="header">
MB5U.com - CSS Web Design
</h1>
#header {
width: 200px;
height: 90px;
background-image: url(http://m.dounai2.com/skins/mb5u_logo4.png);
font-size:1px;
color:#fff;
}

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

代碼調(diào)試框 [m.dounai2.com]

[ 可先修改部分代碼再運行查看效果 ]

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