说实话，互联网上面的类似文章很多了。写这篇文章纯属是把自己的经验记录下来，以后方便自己查找啦。
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;
因为后者对搜索引擎不太友好~
站内搜索