以图换字的几个方法及思路
发布时间:2006-11-02 作者: 来源:转载
今天有个朋友做网页的时候遇到个问题:想保留链接的背景,但又要链接里的文字消失!可是弄了半天一直没办法把这个文字去掉。我想很多学标准的朋友都遇到过这个问题,这里我把常用的几个方法写出来,把思路也讲一下,希望能帮助刚开始学习的朋友。“以图换字”
今天有个朋友做网页的时候遇到个问题:想保留链接的背景,但又要链接里的文字消失!可是弄了半天一直没办法把这个文字去掉。我想很多学标准的朋友都遇到过这个问题,这里我把常用的几个方法写出来,把思路也讲一下,希望能帮助刚开始学习的朋友。
“以图换字”就是用图片替换文字表现。我们都知道,文字在浏览器里的表现形式是很差的,会有锯齿,没办法圆润还有没办法做很多效果。一般情况下网页的内容部分是不需要做效果的,但是在WEB标准中对于LOGO、标题,常常需要用到这些。用表格来做的话我们只是在某个地方帖上一张图,这样的方式比较简单,但是不利于搜索。所以我们需要采用标准方式来做,保证网页处于一种良好的状态而有利于搜索。通常以图
显示消失:(display:none;)这不只是让容器内的内容消失而是包括容器本身都消失。所以我们必需在容器内再做一个容器来保证内消失部分之后,容器内的背景可以正常显示。例:
复制代码 代码如下:标题内容
#logo{display:none;background:URL;width:300px;height:100px;}
如果是这样写那么你根本什么也看不到。那正确的方式是什么写呢?看示例:
复制代码 代码如下:标题内容
#logo{background:URL;width:300px;height:100px;}#logospan{display:none;}大家注意上面的代码,背景是在#logo下定义,而#logospan下除了display:none;没有任何样式。因为被定义了display:none;属性的容器会一无所见,如果定义其它样式也是浪费。光是这样还是有问题,这是个没有链接的例子,那有链接的时候怎么办呢?我们再来看个例子: