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的一些案例。