CSS隐藏文字但显示图像？

Question

我需要在不触及HTML代码的情况下进行更改.

所以我在我的HTML中有这个代码

<span class="share"> 
    <ul>
        <li>Share &nbsp;&nbsp;</li>
        <li class="twitter"><a href="#">twitter</a></li>
        <li class="facebook"><a href="#">facebook</a></li>
        <li class="delicious"><a href="#">delicious</a></li>
        <li class="friendfeed"><a href="#">friendfeed</a></li>
        <li class="addthis"><a href="#">share</a></li>
        <div class="clear"></div>
    </ul>
</span>

这在CSS中

.twitter {
    background: url('../images/tt.png') no-repeat; 
    width:      10px; 
    height:     14px;
}

这工作正常,但Twitter文本在twitter徽标下可见,我不希望这些文本出现在我的列表中,我想用CSS中的图像替换它们.

是否可以不触及HTML代码？

Answer 1

使文本透明.由于它是一个链接,您将需要使用一些选择器来确保所有案例都得到解决:

.twitter a, .twitter a:link, .twitter a:visited
{
    color: transparent;
}

编辑:这个其他选项,虽然更详细,但有利于保持焦点边框(选择链接时出现的小点)与twitter图标的大小和形状.此外,如果选择并复制和粘贴,则不会显示文本.它变得无形和不可选择.这是技术:

.twitter a {
    display: inline-block;
    overflow: hidden;
    width: 0;
    height: 14px;
    padding-left: 10px;
}

Answer 2

你可以使用text-indent:

text-indent: -9999px; /* get rid of any text */

Answer 3

使用带有一点魔力的文本缩进:)

HTML：

           <span class="share"> 
                <ul>
                    <li>Share &nbsp;&nbsp;</li>
                    <li class="twitter"><a href="#" class="twitter">twitter</a></li>
                    <li class="facebook"><a href="#">facebook</a></li>
                    <li class="delicious"><a href="#">delicious</a></li>
                    <li class="friendfeed"><a href="#">friendfeed</a></li>
                    <li class="addthis"><a href="#">share</a></li>
                    <div class="clear"></div>
                </ul>
            </span>

CSS：

a.twitter {
    background-image:url('../images/tt.png');
    display:block;
    height:58px;
    text-indent:-9999px;
    width:200px;
}

所以你看到文本是缩进的，但图像仍然是可点击的，因为我在 Twitter 链接中放置了一个类；）

Answer 4

尝试使您font-size : 0px;的CSS。