校内上面，无聊，伪装了一个星级用户。以前提供的代码只能够在自己的页面显示出自己是星级的。现在的代码换了个容器来显示星星和紫豆。不过，这段代码使用了负边距，可能在IE6下面显示不正常。那个就不在我的考虑范围内了。

只需要在涂鸦板里面加上后文的极端代码就可以了。没有星星的或者想装有钱的，可以试试这些代码。

.profile-tabs-holder .count { 
background:transparent url(http://xnimg.cn/imgpro/icons/star.gif) no-repeat scroll left center; 
font-size:12px; 
margin:0 2px; 
padding-left:38px; 
} 
.profile-tabs-holder .count .count { 
background:transparent url(http://xnimg.cn/imgpro/icons/vip_l.gif) no-repeat scroll 0 0; 
margin-left:-35px !important; 
padding-left:35px; 
text-indent:35px;
} 
.profile-tabs-holder img { 
display:none; 
} 

PS：12月28日修正了一下，针对IE7，效果修改了一下，把padding-left换成了text-indent，因为IE7好像background是从padding里面开始算的。不过IE6的负边距问题还是没有想到解决方法。不知有没有高手指导。

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

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;
因为后者对搜索引擎不太友好~