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

尝试在您的CSS中创建font-size : 0px;。

Answer 5

我可能错了你的问题。但是你想隐藏文字。我会使用jQuery，但要记住，你的<a>会失去质量。

<script>
    $('.twitter a').html('');
</script>

CSS隐藏文字但显示图像？

5 个答案: