以图换字的几个方法及思路

小毅 楼主

今天有个朋友做网页的时候遇到个问题：想保留链接的背景，但又要链接里的文字消失！可是弄了半天一直没办法把这个文字去掉。我想很多学标准的朋友都遇到过这个问题，这里我把常用的几个方法写出来，把思路也讲一下，希望能帮助刚开始学习的朋友。

“以图换字”就是用图片替换文字表现。我们都知道，文字在浏览器里的表现形式是很差的，会有锯齿，没办法圆润还有没办法做很多效果。一般情况下网页的内容部分是不需要做效果的，但是在WEB标准中对于LOGO、标题，常常需要用到这些。用表格来做的话我们只是在某个地方帖上一张图，这样的方式比较简单，但是不利于搜索。所以我们需要采用标准方式来做，保证网页处于一种良好的状态而有利于搜索。通常以图

显示消失： (display:none;) 这不只是让容器内的内容消失而是包括容器本身都消失。所以我们必需在容器内再做一个容器来保证内消失部分之后，容器内的背景可以正常显示。例 ：

1. <div id="logo">标题内容</div>
   
2. #logo {display:none; background:URL; width:300px; height:100px;}

复制代码

如果是这样写那么你根本什么也看不到。那正确的方式是什么写呢？看示例：

1. <div id="logo"><span>标题内容</span></div>
   
2. #logo {background:URL; width:300px; height:100px;}#logo span {display:none;}

复制代码

大家注意上面的代码，背景是在#logo下定义，而#logo span下除了display:none;没有任何样式。因为被定义了display:none;属性的容器会一无所见，如果定义其它样式也是浪费。光是这样还是有问题，这是个没有链接的例子，那有链接的时候怎么办呢？我们再来看个例子：

1. <div id="logo"><a href="URL" title="标题">标题内容</a></div>
   
2. #logo {background:URL; width:300px; height:100px;}#logo a {display:none;}

复制代码

大家猜一下这个代码能显示出东西吗？事实是背景显示了，可是链接没了。我们上面说过：被赋于了display:none;属性的容器自身也会消失。那我们就清楚了，必需要在这个A标签里加个容器。我们再看示例：

1. <div id="logo"><a href="URL" title="标题"><span>标题内容</span></a></div>
   
2. #logo {background:URL; width:300px; height:100px;}#logo a span {display:none;}

复制代码

这样的是不是就正确了呢？还是不行，为什么呢，我们都知道A不是块级标签，也就是说A的高宽都是内容来决定的，现在内容消失了，也就没有了这个高宽的属性了，那么这个链接也就成了一个没有热区的链接了。可能是点不着的。我们必需要把上面的代码再做修改。

1. <div id="logo"><a href="URL" title="标题"><span>标题内容</span></a></div>
   
2. #logo a {background:URL; width:300px; height:100px; display:block;}#logo a span {display:none;}

复制代码

注意这里的A标签的属性一定要加上display:block;把他强制为块级元素。这样A标签就成了一个宽为300高为100，有一个背景没有文字内容的链接形式。大家看到了上面在A标签里还加了一个span标签，好像有点多余。能不能不用span也可以实现效果呢。可以，不过思路就不一样了，而是下面的这种位置移动法。

位置移动：也就是让内容啊分进行位置移动，移出显示区之外。我们还是看代码来了解这个方法。

1. <div id="logo"><a href="URL" title="标题">标题内容</a></div>
   
2. #logo, #logo a {width:300px; height:100px; overflow:hidden;}#logo a {background:URL; padding:100px 0 0; display:block;}

复制代码

在CSS中设置了#logo与A有一个溢出隐藏(overflow:hidden;)也就是说有超出300*100大小的就会被隐藏。我们看A被定义了一个padding:100px 0 0; 这个顶部的内距正好把内容压到了显示区以外。那为什么#logo也要用overflow:hidden;呢？因为在IE下会出现一个小BUG，A的内容没办法溢出隐藏所以必需要在父级标签上还要加一个overflow:hidden;

以上内容只是我比较常用的两种方法，当然还会有一些别的方式方法，这些方法都有各自的有缺点，不过各种方法之间也都有互补的。在应用时可以依据情况选择使用即可。

毅博客阅读：http://andymao.com/andy/post/61.html

[ 本帖最后由 小毅 于 2006-10-26 12:37 编辑 ]

hiddaboys

display还可以实现块状效果

xxcn2006

danielive

为什么不用text-indent: -9999px;? 有什么缺点吗?

飞虫

在A标签里还加了一个span标签，好像有点多余。能不能不用span也可以实现效果呢。可以，不过思路就不一样了……

何不直接这样，去掉span就行了：

<style> #text{ background:url("http://bbs.blueidea.com/images/blue/logo.gif"); width:90px; height:27px; } #text a{ width:90px; height:27px; display:block;} </style> <div id="text"><a href="###"></a></div>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

小毅 楼主

如果不写文字那么意义也就没有了，也不利于搜索。我上面有说，这些都是建立来利于搜索的基础上的

另：
为什么不用text-indent: -9999px;? 有什么缺点吗?

答：
text-indent:的意思是首行缩进，那么如果遇上一段文字并有折行，那么text-indent:就很明显是不足的！

[ 本帖最后由 小毅 于 2006-10-23 06:06 编辑 ]

飞虫

搜索引擎这一块我不明白

还是想问一句，
不用<a><span>text</span></a>
用<a tilte="text" alt="text"></a>，
从有利于搜索的角度看，能否达到一样的效果？

总觉得加了一段文字，然后有把它隐藏，看起来很奇怪~

kyomic

alt这种东东，搜索引擎应不会注意吧！

不错，学习中

bestdesign

搜索引擎会注意alt的

十字花下

“以图换字”就是用图片替换文字表现。

俺不看内容，直接写我的方法，不知道跟楼主一样否？
<a href="#"><span>afsdf</span></a>

写css，鼠标经过的时候a出现背景图，span隐藏。这不就好了？

觉得这个最简单了。

POPOEVER

原帖由 小毅 于 2006-10-23 06:05 发表
如果不写文字那么意义也就没有了，也不利于搜索。我上面有说，这些都是建立来利于搜索的基础上的

如果你的页面遵循 508 规范协议，那么他本身就是利于搜索的，当然之间不是必然关系，但是给 a 添加 title 是好习惯，当然，就事论事来说，链接没有文字的确毫无意义

honker007

``我是新手  学习下```

hzc83hzc

学习了……

想保留链接的背景，但又要链接里的文字消失！

lzq411

我也发表一点浅见。

<a>里面的文字不应去掉，
还因为如果浏览器禁止显示图片的话，或者用阅读器什么的
不至于造成用户无法接受信息。

rocklv

不错，推荐的Blog也不错

tweilight

现在的搜索引擎对display:none;会认为作弊哦
所以还是text-indent好点

kusanggi

display 功能强大 用的还是比较多的

dearmonkey

alt搜索引擎会注意的，图片的搜索一般都是依靠alt。

文章不错。

welcome58

善于整理成章,支持

heluyao

這就叫把所學的真正用起來了

學習了

writeidea

不错不错，不过我对搜索引擎有一些意见，为什么我们要跟着他的步伐走，他却不能随着我们的步伐走呢？

虫QP

原帖由 小毅 于 2006-10-23 06:05 发表

另：
为什么不用text-indent: -9999px;? 有什么缺点吗?

答：
text-indent:的意思是首行缩进，那么如果遇上一段文字并有折行，那么text-indent:就很明显是不足的！

果遇上一段文字并有折行，那么text-indent:就很明显是不足的！
~~~~-9999px已经决定了不会有折行了。除非你的这个文字总长度有9999px。

crazyskyhorse

原帖由 虫QP 于 2007-8-6 17:32 发表



果遇上一段文字并有折行，那么text-indent:就很明显是不足的！
~~~~-9999px已经决定了不会有折行了。除非你的这个文字总长度有9999px。

这样做不会增加容器的宽度吗？如果这个效果不是用在页面最左边，有没有麻烦？

piscdong

我一般都用text-indent: -9999px;

benboba

我一般用-999em，可以省去一个字节，呵呵。

mvmyok

图片的alt 和 title 搜索引擎认的是 alt

fuguojian1988

思路还是值得夸奖的

pc2704

这思路挺好，谢谢了。

510128349

还可以啊 学习学习

pc2704

学习了，对于验证码的是不是这种方式可以。