CSS隐藏文本但显示图像？ [英] CSS Hide Text But Show Image?

问题描述

我需要在HTML中加入这个程式码

<$> p $ p> < span class =share>
< ul>
< li>分享& nbsp;& nbsp;< / li>
< li class =twitter>< a href =＃> twitter< / a>< / li>
< li class =facebook>< a href =＃> facebook< / a>< / li>
< li class =delicious>< a href =＃>美味< / a>< / li>
< li class =friendfeed>< a href =＃> friendfeed< / a>< / li>
< li class =addthis>< a href =＃>分享< / 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代码吗？

解决方案

使文本透明。因为它是一个链接，你会想要使用一些选择器，以确保所有的情况下：

  .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; 
} 
  

I need to change something without touching HTML codes.

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

            .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.

Is it possible to do without touching HTML Codes?

解决方案

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 a {
    display: inline-block;
    overflow: hidden;
    width: 0;
    height: 14px;
    padding-left: 10px;
}

这篇关于CSS隐藏文本但显示图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！