HJin.me 黄金一博

说实话，互联网上面的类似文章很多了。写这篇文章纯属是把自己的经验记录下来，以后方便自己查找啦。

CSS图片替换文字有两种方法

display:none;  
text-indent:-9999em;  

先说第一种方法，这个是用的比较早的一种方式，使用方法如下，例如我要替换一个超链接。

<a href="#"><span>待替换的链接</span></a> 

对应的CSS就是

a {background:url(....); display:block; width:100px; height:100px; }/*关于a标签的伪类就自己添加*/ 
span {display:none; } 

这样的方式就是需要多用一个标签。给a设置好背景图片，并且设置显示为块状对象，并且指定高宽，然后span指定文字不显示。

第二种方式相对来说简单一些，只需要一个标签

<a href="#">待替换的链接</a> 

CSS代码

a { display:block; width:100px; height:100px; overflow:hidden; text-indent:-9999em; background:url(...);}  

其效果就是把a变成指定高宽的块状对象，然后设置溢出的内容不显示，然后设置文字缩进-9999em，这样文字就到显示的范围外了，最后指定背景。

当初自己用第二种方法的时候，经常会出现在FF下面点击链接，结果会产生一个向左延长虚线框，这个是因为没有设置overflow:hidden;的缘故。

NetPuter 说…

建议使用text-indent:-9999em;而不是display:none;
因为后者对搜索引擎不太友好~