请选择 进入手机版 | 继续访问电脑版
收藏本站腾讯微博新浪微博
点点网模板设计大赛 phpchina

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 用悬赏 三天解决问题 解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动 地图任务 邮件更新任务:保护帐号安全

积分换实物,来参加蓝色理想积分兑换吧! 联系招聘客服 蓝色理想帮你找工作! 万元奖励等你拿——点点网模板设计大赛

查看: 6240|回复: 30

[教程] 以图换字的几个方法及思路 [复制链接]

小毅 楼主

悟禅布衣

荣誉管理

帖子
1137
体力
10270
威望
218
居住地
广东省 广州市
发表于 2006-10-22 14:17:57 |显示全部楼层
今天有个朋友做网页的时候遇到个问题:想保留链接的背景,但又要链接里的文字消失!可是弄了半天一直没办法把这个文字去掉。我想很多学标准的朋友都遇到过这个问题,这里我把常用的几个方法写出来,把思路也讲一下,希望能帮助刚开始学习的朋友。

“以图换字”就是用图片替换文字表现。我们都知道,文字在浏览器里的表现形式是很差的,会有锯齿,没办法圆润还有没办法做很多效果。一般情况下网页的内容部分是不需要做效果的,但是在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 编辑 ]
已有 1 人评分威望 收起 理由
greengnn + 4 精品文章

总评分: 威望 + 4   查看全部评分

西部数码顶级域名注册商39元抢注!
帖子
111
体力
224
威望
0
发表于 2006-10-22 17:20:45 |显示全部楼层
display还可以实现块状效果
TX经典
租服务器,上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具 举报

小小菜鸟

钻石会员

帖子
3095
体力
10742
威望
0
发表于 2006-10-22 20:07:36 |显示全部楼层

使用道具 举报

帖子
12
体力
29
威望
0
发表于 2006-10-22 20:27:28 |显示全部楼层
为什么不用text-indent: -9999px;? 有什么缺点吗?

使用道具 举报

飞虫 
帖子
343
体力
1240
威望
0
居住地
广东省 深圳市
发表于 2006-10-22 20:37:39 |显示全部楼层
在A标签里还加了一个span标签,好像有点多余。能不能不用span也可以实现效果呢。可以,不过思路就不一样了……


何不直接这样,去掉span就行了:

 提示:您可以先修改部分代码再运行

每次自以为进步了,看看别人,发现我他妈竟然是在退步!

使用道具 举报

小毅 楼主

悟禅布衣

荣誉管理

帖子
1137
体力
10270
威望
218
居住地
广东省 广州市
发表于 2006-10-23 06:05:01 |显示全部楼层
如果不写文字那么意义也就没有了,也不利于搜索。我上面有说,这些都是建立来利于搜索的基础上的

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

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

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

使用道具 举报

飞虫 
帖子
343
体力
1240
威望
0
居住地
广东省 深圳市
发表于 2006-10-23 09:23:21 |显示全部楼层
搜索引擎这一块我不明白

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

总觉得加了一段文字,然后有把它隐藏,看起来很奇怪~
每次自以为进步了,看看别人,发现我他妈竟然是在退步!

使用道具 举报

kyomic 

Kyomic

高级会员

帖子
95
体力
599
威望
0
发表于 2006-10-23 18:05:58 |显示全部楼层
alt这种东东,搜索引擎应不会注意吧!

不错,学习中
Blog:www.shareme.cn

使用道具 举报

帖子
388
体力
1429
威望
0
发表于 2006-10-23 18:34:24 |显示全部楼层
搜索引擎会注意alt的
www.fenmei.com  爬在DIV+CSS的边缘

使用道具 举报

花匠

高级会员 手机认证 

帖子
570
体力
894
威望
4
居住地
北京市 昌平区
发表于 2006-10-23 18:39:55 |显示全部楼层
“以图换字”就是用图片替换文字表现。

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

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

觉得这个最简单了。

使用道具 举报

N个蓝色大泡泡

荣誉管理 手机认证 

帖子
19900
体力
38547
威望
203
发表于 2006-10-24 16:01:18 |显示全部楼层
原帖由 小毅 于 2006-10-23 06:05 发表
如果不写文字那么意义也就没有了,也不利于搜索。我上面有说,这些都是建立来利于搜索的基础上的

如果你的页面遵循 508 规范协议,那么他本身就是利于搜索的,当然之间不是必然关系,但是给 a 添加 title 是好习惯,当然,就事论事来说,链接没有文字的确毫无意义
twitter | 微博 | 新单位
人最想获得的是尊重 用一生学习彼此尊重

使用道具 举报

帖子
53
体力
111
威望
0
发表于 2006-10-24 22:30:37 |显示全部楼层
``我是新手  学习下```

使用道具 举报

黑白灰823

初级会员

帖子
108
体力
181
威望
0
居住地
浙江省 杭州市
发表于 2006-10-25 09:55:56 |显示全部楼层
学习了……

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

使用道具 举报

lzq411 
帖子
62
体力
162
威望
0
发表于 2006-10-26 00:19:31 |显示全部楼层
我也发表一点浅见。

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

使用道具 举报

rocklv 

洛克旅

中级会员

帖子
202
体力
426
威望
0
居住地
广东省 广州市
发表于 2006-10-26 11:29:24 |显示全部楼层
不错,推荐的Blog也不错

使用道具 举报

帖子
13
体力
34
威望
0
居住地
福建省 福州市
发表于 2007-8-4 22:08:20 |显示全部楼层
现在的搜索引擎对display:none;会认为作弊哦
所以还是text-indent好点

使用道具 举报

二当家

高级会员

帖子
317
体力
507
威望
0
发表于 2007-8-5 14:59:59 |显示全部楼层
display 功能强大 用的还是比较多的

使用道具 举报

可爱的猴子

高级会员

帖子
288
体力
581
威望
1
发表于 2007-8-6 00:47:21 |显示全部楼层

回复 #8 kyomic 的帖子

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

文章不错。

使用道具 举报

缘由心生

银牌会员

帖子
473
体力
2799
威望
2
发表于 2007-8-6 09:51:39 |显示全部楼层
善于整理成章,支持

使用道具 举报

的士司机

金牌会员 手机认证 

帖子
1422
体力
4895
威望
0
居住地
广东省 深圳市
发表于 2007-8-6 12:38:01 |显示全部楼层
這就叫把所學的真正用起來了

學習了

使用道具 举报

鲨鱼

银牌会员

帖子
813
体力
2271
威望
0
居住地
辽宁省 大连市
发表于 2007-8-6 13:38:37 |显示全部楼层
不错不错,不过我对搜索引擎有一些意见,为什么我们要跟着他的步伐走,他却不能随着我们的步伐走呢?
时尚范:www.funs43.com

使用道具 举报

虫QP 
帖子
1080
体力
2655
威望
24
发表于 2007-8-6 17:32:39 |显示全部楼层
原帖由 小毅 于 2006-10-23 06:05 发表

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

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



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

使用道具 举报

帖子
46
体力
193
威望
0
发表于 2007-11-20 22:37:50 |显示全部楼层
原帖由 虫QP 于 2007-8-6 17:32 发表



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

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

使用道具 举报

守分奴

钻石会员 手机认证 

帖子
8682
体力
10779
威望
8
发表于 2007-11-21 10:44:26 |显示全部楼层
我一般都用text-indent: -9999px;
火星人滚回火星去

迷你同学录

使用道具 举报

奔波儿灞

高级会员 手机认证 

帖子
276
体力
619
威望
10
发表于 2007-11-21 13:24:31 |显示全部楼层
我一般用-999em,可以省去一个字节,呵呵。

使用道具 举报

mvmyok 
帖子
27
体力
133
威望
0
居住地
湖南省 邵阳市
发表于 2011-12-2 10:54:59 |显示全部楼层
图片的alt 和 title 搜索引擎认的是 alt
http://www.gw005.com

使用道具 举报

天天向网NET

钻石会员

帖子
2229
体力
7366
威望
1
居住地
广东省 深圳市
发表于 2011-12-9 13:55:18 |显示全部楼层
思路还是值得夸奖的
商丘网站建设
http://www.dx359.com/

使用道具 举报

pc2704 
帖子
49
体力
188
威望
0
居住地
广东省 中山市
发表于 2011-12-9 15:24:27 |显示全部楼层
这思路挺好,谢谢了。
http://bbs.36tui.com

使用道具 举报

帖子
52
体力
105
威望
0
发表于 2011-12-9 16:53:30 |显示全部楼层
还可以啊 学习学习
http://www.sxtqw.com

使用道具 举报

pc2704 
帖子
49
体力
188
威望
0
居住地
广东省 中山市
发表于 2011-12-13 10:48:15 |显示全部楼层
学习了,对于验证码的是不是这种方式可以。
http://bbs.36tui.com

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )  

GMT+8, 2012-2-4 15:31 , Processed in 0.571810 second(s), 11 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部