1

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

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

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

5 回答 5

1

你错过了：

display:block;

你应该使用：

.cnn-text { 显示：块；文本缩进：-9999px；}

于 2013-02-20T16:10:49.653 回答
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;
}
于 2013-02-20T16:15:23.710 回答
0

<img>您可以在跨度和display:none;文本上插入一个元素：

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

css

.cnn-b{
    width: 200px; height: 75px;
}

.cnn-text {
    display:none;
}
于 2013-02-20T16:15:08.740 回答
0

默认情况下，跨度是内联元素。width 和 height 属性将无法在 .cnn-b 跨度上按预期工作。如果您更改 <span class="cnn-b">为<div class="cnn-b">或按照 James 的建议使用display:block;cnn-b 跨度而不是 cnn-text 跨度，这将解决您的问题。你的最终代码应该是这样的：

<html>
<head>
    <style>
        .cnn-b{
            display: block;
            width: 200px; height: 75px;
            background: url("cnn.png") no-repeat 0 0;
            text-indent: -9999px;
        }
        .cnn-text {
            text-indent: -9999px;
        }
    </style>
</head>

<body>
    <span class="cnn-b">
        <a href="http://www.cnn.com" alt="cnn" title="cnn">
            <span class="cnn-text">cnn</span>
        </a>
    </span>
</body>
</html>
于 2013-02-20T16:36:38.343 回答
0

我认为有几种方法可以做你所说的。

听起来您所说的只是拥有一个可点击的图像。如果是这种情况，那么我建议将跨度放在锚标记内：

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

如果您这样做，那么您唯一需要担心的是确保显示图像，这可以通过将 CSS 中的跨度调整为正确的宽度和高度并将显示设置为块来完成（块将允许它保持宽度）：

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

这是一个例子：http: //jsfiddle.net/CPUKP/1/

于 2013-02-20T16:27:59.813 回答