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

2024-08-30 08:36:47

字體：大中小

供稿：網(wǎng)友

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

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

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

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

　　小提示：你可以用web developer插件去掉css效果來查看丟失css文件時(shí)的情況。

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

example source code [www.jzxue.com]
<h1 id="header">
    <span>jzxue.com - css web design</span>
</h1>
#header {
    width: 200px;
    height: 90px;
    background-image: url(http://www.jzxue.com/skins/jzxue_logo4.png);
}
#header span {
    display: none;
}
　　直接將h1標(biāo)簽中的span元素設(shè)置成display: none直接隱藏掉，實(shí)現(xiàn)了圖像替代的效果。運(yùn)行效果如下：

div css xhtml xml source code to run source code to run [www.jzxue.com]<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=gb2312" /><title>www.jzxue.com</title><style type="text/css">#header {width: 200px;height: 90px;background-image: url(http://www.jzxue.com/images/logo.gif);}#header span {display: none;}</style></head><body><h1 id="header"><span>jzxue.com - css web design</span></h1></body></html>
    [ 可先修改部分代碼再運(yùn)行查看效果 ]

二、margin移位法

example source code [www.jzxue.com]
<h1 id="header">
    <span>jzxue.com - css web design</span>
</h1>
#header {
    width: 200px;
    height: 90px;
    background-image: url(http://www.jzxue.com/skins/jzxue_logo4.png);
}
#header span { margin: 0 0 0 -2000px; }
　　我們將標(biāo)簽中的span進(jìn)行了外邊距的設(shè)置，距離左部-2000px，在css正常發(fā)揮作用的時(shí)候，當(dāng)然看不到文字了。實(shí)現(xiàn)了圖像替換?？聪旅娴倪\(yùn)行效果：

div css xhtml xml source code to run source code to run [www.jzxue.com]<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=gb2312" /><title>www.jzxue.com</title><style type="text/css">#header {width: 200px;height: 90px;background-image: url(http://www.jzxue.com/images/logo.gif);}#header span {margin: 0 0 0 -2000px;}</style></head><body><h1 id="header"><span>jzxue.com - css web design</span></h1></body></html>
    [ 可先修改部分代碼再運(yùn)行查看效果 ]

三、文本縮進(jìn)法text-indent

example source code [www.jzxue.com]
<h1 id="header">
    jzxue.com - css web design
</h1>
#header {
    width: 200px;
    height: 90px;
    background-image: url(http://www.jzxue.com/skins/jzxue_logo4.png);
    text-indent: -200em;
    overflow: hidden;
}
　　我們將標(biāo)簽中的文字的文本縮進(jìn)設(shè)置成足夠大的值，并且設(shè)置容器h1的overflow的值為hidden。我們也看不到文字了。實(shí)現(xiàn)了圖像替換?？聪旅娴倪\(yùn)行效果：

div css xhtml xml source code to run source code to run [www.jzxue.com]<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=gb2312" /><title>www.jzxue.com</title><style type="text/css">#header {width: 200px;height: 90px;background-image: url(http://www.jzxue.com/images/logo.gif);text-indent: -200em;overflow: hidden;}</style></head><body><h1 id="header">jzxue.com - css web design</h1></body></html>
    [ 可先修改部分代碼再運(yùn)行查看效果 ]

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

example source code [www.jzxue.com]
<h1 id="header">
    <span>jzxue.com - css web design</span>
</h1>
#header {
    width: 200px;
    height: 90px;
    background-image: url(http://www.jzxue.com/skins/jzxue_logo4.png);
}
#header span {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
}
　　我們將h1標(biāo)簽中文字的容器span設(shè)為塊元素，寬度與高度都是零，并且溢出為隱藏。這樣我們就看不到文字了，當(dāng)css失效時(shí)，文字則正常顯示，我們看下面的效果：

div css xhtml xml source code to run source code to run [www.jzxue.com]<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=gb2312" /><title>www.jzxue.com</title><style type="text/css">#header {width: 200px;height: 90px;background-image: url(http://www.jzxue.com/images/logo.gif);}#header span {display: block;width: 0;height: 0;overflow: hidden;}</style></head><body><h1 id="header"><span>jzxue.com - css web design</span></h1></body></html>
    [ 可先修改部分代碼再運(yùn)行查看效果 ]

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

example source code [www.jzxue.com]
<h1 id="header">
    jzxue.com - css web design
</h1>
#header {
    width: 200px;
    height: 90px;
    background-image: url(http://www.jzxue.com/skins/jzxue_logo4.png);
    font-size:1px;
    color:#fff;
}
　　我們將h1的文字的大小設(shè)為1px，顏色設(shè)置成與背景圖片接近的顏色，也同樣實(shí)現(xiàn)了css圖像替換的效果，但此效果需要在特定的背景圖片下才顯得完美，不然就容易看出來了。我們看下面的運(yùn)行效果：

div css xhtml xml source code to run source code to run [www.jzxue.com]<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=gb2312" /><title>www.jzxue.com</title><style type="text/css">#header {width: 200px;height: 90px;background-image: url(http://www.jzxue.com/images/logo.gif);font-size:1px;color:#fff;}</style></head><body><h1 id="header">jzxue.com - css web design</h1></body></html>
    [ 可先修改部分代碼再運(yùn)行查看效果 ]
　　實(shí)現(xiàn)的方法或許不止這一些，你也可以思考如何實(shí)現(xiàn)讓圖像代替文字，更好的設(shè)計(jì)符合web標(biāo)準(zhǔn)思維的網(wǎng)頁作品。本文參考mezzoblue的一些案例。