Html CSS 隐藏文本但显示图像？

CSS Hide Text But Show Image?

提问by Tumay

I need to change something without touching HTML codes.

我需要在不触及 HTML 代码的情况下更改某些内容。

So I have this code in my 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>

and this in CSS

这在 CSS 中

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

This works fine, but twitter text is visible under the twitter logo, I don't want those texts to appear in my list, I want to replace them with images in CSS.

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

Is it possible to do without touching HTML Codes?

是否可以不接触 HTML 代码？

回答by gilly3

Make the text transparent. Since it's a link, you'll want to use a few selectors to make sure all cases are addressed:

使文本透明。由于它是一个链接，您需要使用一些选择器来确保处理所有情况：

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

Edit:This other option, while more verbose, has the benefit of keeping the focus border (the little dots that appear when a link is selected) to the size and shape of the twitter icon. Also, the text will not be revealed if selected and copied and pasted. It becomes invisible and unselectable. Here is the technique:

编辑：这个其他选项虽然更详细，但具有将焦点边框（选择链接时出现的小点）保持为 Twitter 图标的大小和形状的好处。此外，如果选择并复制和粘贴，文本将不会显示。它变得不可见且不可选择。这是技术：

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

回答by Cassidy Laidlaw

You could use text-indent:

你可以使用text-indent：

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

回答by Thiyagesh

Try making your font-size : 0px;in your css.

尝试font-size : 0px;在你的 css 中制作你的。

回答by Zhianc

use text-indent with a little magic in it :)

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

HTML:

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:

CSS：

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

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

So you see the text is indented but still the image is still clickable because i've put a class in the twitter link ;)

所以你看到文本缩进了，但图像仍然可以点击，因为我在 twitter 链接中添加了一个类；)

回答by Kalle H. V?ravas

I possibly got your question wrong. But you want to hide the text. I would use jQuery, however remember, that your <a>will lose mass.

我可能把你的问题弄错了。但是你想隐藏文本。我会使用 jQuery，但请记住，您<a>将失去质量。

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