CSS中以图片替换文字的表现方法

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

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

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

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

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

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

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

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

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

第 1 2 页

补充：Css教程,高级应用