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

2024-08-30 08:36:47

字體：大中小

來源：轉載

供稿：網友

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

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

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

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

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

一、直接隱藏文字法 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標簽中的span元素設置成display: none直接隱藏掉，實現了圖像替代的效果。運行效果如下：

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>
    [ 可先修改部分代碼再運行查看效果 ]

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

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>
    [ 可先修改部分代碼再運行查看效果 ]

三、文本縮進法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;
}
　　我們將標簽中的文字的文本縮進設置成足夠大的值，并且設置容器h1的overflow的值為hidden。我們也看不到文字了。實現了圖像替換。看下面的運行效果：

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>
    [ 可先修改部分代碼再運行查看效果 ]

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

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

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>
    [ 可先修改部分代碼再運行查看效果 ]

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

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

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>
    [ 可先修改部分代碼再運行查看效果 ]
　　實現的方法或許不止這一些，你也可以思考如何實現讓圖像代替文字，更好的設計符合web標準思維的網頁作品。本文參考mezzoblue的一些案例。