论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

CSS布局中常用的CSS图像置换、图片替代的方法举例

文章类别:div+css布局 | 发表日期:2008-9-26 11:27:43

  在xhtml CSS网页布局中,我们很多结构与表现的图片,都用背景来进行操作的。例如栏目的标题,我们可以制作一幅图片,由于是图片,所以加上装饰性的图案纹理,文字字体也可以更加的多样化。我们常用的方法是background-image: url(http://www.21shipin.com/skins/21shipin_logo4.png) 但我们需要考虑到两种情况的发生:

  1、假如访客在浏览网页时,丢失了css文件,直接显示了页面的xhtml标签。我们的页面就变的难以读懂了,因为背景图片是在css文件中定义了,而此时根本显示不出来,我们无法阅读页面内容。

  2、搜索引擎蜘蛛程序对图片中的文字根本无法辩认。它根本不清楚这里描述与表现的是什么。

  我们就可以通过CSS图像置换、图片替代的方法来解决上面的两个问题。相当于说,栏目的标题我们用背景图片来表现,当css文件丢失时,可以显示出文字。当搜索引擎蜘蛛读取网页时,也能知道此标签的内容。也就是让图像替换掉文字,美化页面,更具有兼容性与搜索引擎优化。我们进入主题,下面例举了一些常用的CSS图像置换、图片替代的方法,希望对你有参考意义。本文章由21shipin.com原创!

  小提示:你可以用Web Developer插件去掉CSS效果来查看丢失css文件时的情况。

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

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<h1 id="header">
<span>21shipin.com - CSS Web Design</span>
</h1>
#header {
width: 200px;
height: 90px;
background-image: url(http://www.21shipin.com/skins/21shipin_logo4.png);
}
#header span {
display: none;
}

  直接将h1标签中的span元素设置成display: none直接隐藏掉,实现了图像替代的效果。运行效果如下:

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

二、margin移位法

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<h1 id="header">
<span>21shipin.com - CSS Web Design</span>
</h1>
#header {
width: 200px;
height: 90px;
background-image: url(http://www.21shipin.com/skins/21shipin_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.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

三、文本缩进法text-indent

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<h1 id="header">
21shipin.com - CSS Web Design
</h1>
#header {
width: 200px;
height: 90px;
background-image: url(http://www.21shipin.com/skins/21shipin_logo4.png);
text-indent: -200em;
overflow: hidden;
}

  我们将标签中的文字的文本缩进设置成足够大的值,并且设置容器h1的overflow的值为hidden。我们也看不到文字了。实现了图像替换。看下面的运行效果:

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

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

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<h1 id="header">
<span>21shipin.com - CSS Web Design</span>
</h1>
#header {
width: 200px;
height: 90px;
background-image: url(http://www.21shipin.com/skins/21shipin_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.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

五、文字够小、颜色够近的方法

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<h1 id="header">
21shipin.com - CSS Web Design
</h1>
#header {
width: 200px;
height: 90px;
background-image: url(http://www.21shipin.com/skins/21shipin_logo4.png);
font-size:1px;
color:#fff;
}

  我们将h1的文字的大小设为1px,颜色设置成与背景图片接近的颜色,也同样实现了CSS图像替换的效果,但此效果需要在特定的背景图片下才显得完美,不然就轻易看出来了。我们看下面的运行效果:

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

  实现的方法或许不止这一些,你也可以思考如何实现让图像代替文字,更好的设计符合web标准思维的网页作品。本文参考mezzoblue的一些案例。
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058