CSS隐藏文本但显示图像？答案

【问题标题】：CSS Hide Text But Show Image?CSS隐藏文本但显示图像？
【发布时间】：2019-03-12 00:41:49
【问题描述】：

我需要在不接触 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 代码？

【问题讨论】：

这里：jsfiddle.net/hetr1whg

标签： html css

【解决方案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;
}

【讨论】：

文本是可选的，宽度也不同，我有 5 个彼此相邻的社交书签链接，我希望它们的填充相同。
@Tumay - 有趣的是，我的编辑是在您发表评论后的一秒钟内完成的，似乎完美地解决了您的评论。 :)

【解决方案2】：

你可以使用text-indent:

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

【讨论】：

这也移动了链接。推特图标变得无法点击。
这在显示为块时可以正常工作，内联块或类似

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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 链接中放了一个类；）

【讨论】：

OP 特别声明他们不能更改 HTML。