CSS : text hidiing

Question

我试图隐藏链接中的文本并使图像仅可见且图像可点击。

我正在使用下面的代码，但文本似乎隐藏了。

<span class="cnn-b">

<a href="http://www.cnn.com" alt="cnn" title="cnn">
<span class="cnn-text">cnn</span>

</a></span> 
css

.cnn-b{
    width: 200px; height: 75px;
    background: url("cnn.png") no-repeat 0 0;
    text-indent: -9999px;
}
.cnn-text {
    text-indent: -9999px;
}

Answer 1

您不需要 <span> 的所有额外标记-s 并且有比 text-indent: -9999px 更好的(性能方面)隐藏文本的方法- DEMO

HTML

<a href="http://www.cnn.com" alt="cnn" title="cnn" class="cnn">cnn</a>

CSS

.cnn {
    width: 200px; 
    height: 75px;
    display: inline-block;
    background: url(http://lorempixel.com/200/75) no-repeat 0 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}