blocks|key|5649876|text|您不需要-s的所有额外标记，而且有一种比text-indent:+-9999px+-+更好的(在性能方面)隐藏文本的方法|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5649877|HTML|BOLD|5649878|<a+href="http://www.cnn.com"+alt="cnn"+title="cnn"+class="cnn">cnn</a>|code-block|syntax|javascript|5649879|CSS|5649880|.cnn+{
++++width:+200px;+
++++height:+75px;
++++display:+inline-block;
++++background:+url(http://lorempixel.com/200/75)+no-repeat+0+0;
++++text-indent:+100%25;
++++white-space:+nowrap;
++++overflow:+hidden;
}|5649881|entityMap^0|4|6|Q|K|0|0|4|0|0|0|3|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@$9|Z|A|10|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|11|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|12|8|@$9|13|A|14|B|H]]|D|@]|E|$]]|$1|P|3|Q|5|K|7|15|8|@]|D|@]|E|$L|M]]|$1|R|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|S|$]]

You don't need all the extra markup of <code>&lt;span&gt;</code>-s and there is a better ( performance-wise ) way to hide the text than <code>text-indent: -9999px</code> - <a href="http://jsfiddle.net/a3JJm/" rel="nofollow">DEMO</a>

HTML

<pre><code>&lt;a href="http://www.cnn.com" alt="cnn" title="cnn" class="cnn"&gt;cnn&lt;/a&gt;
</code></pre>

CSS

<pre class="lang-css prettyprint-override"><code>.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;
}
</code></pre>

blocks|key|5649835|text|您缺少：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5649836|display:block;|offset|length|style|CODE|5649837|您应该使用：|5649838|文本.cnn-+|5649839|+{显示:块；文本缩进：-9999px；}|blockquote|5649840|5649841|entityMap^0|0|0|E|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@$D|T|E|U|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|V|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|W|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|X|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|Q|$]]

You are missing:

<code>display:block;</code>

You should use:

<blockquote>
 .cnn-text {
 display:block;
 text-indent: -9999px; }
</blockquote>

blocks|key|5649857|text|您可以将<img>元素与跨度一起插入，并在文本上插入display:none;：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5649858|<span+class="cnn-b">
++++<a+href="http://www.cnn.com"+alt="cnn"+title="cnn">
++++++++<span+class="cnn-text">cnn
++++++++<img+src="cnn.png"+/>
++++</a>
|code-block|syntax|javascript|5649859|css|5649860|.cnn-b{
++++width:+200px;+height:+75px;
}

.cnn-text+{
++++display:none;
}|5649861|entityMap^0|4|5|Q|D|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

You could insert an <code>&lt;img&gt;</code> element along with the span, and <code>display:none;</code> on the text:

<pre><code>&lt;span class="cnn-b"&gt;
 &lt;a href="http://www.cnn.com" alt="cnn" title="cnn"&gt;
 &lt;span class="cnn-text"&gt;cnn&lt;/span&gt;
 &lt;img src="cnn.png" /&gt;
 &lt;/a&gt;
&lt;/span&gt;
</code></pre>

css

<pre><code>.cnn-b{
 width: 200px; height: 75px;
}

.cnn-text {
 display:none;
}
</code></pre>

blocks|key|5166386|text|我认为有几种方法可以做到你所说的事情。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5166387|听起来你所说的只是简单的拥有一个可以点击的图片。如果是这种情况，那么我建议将span放在锚标记中：|5166388|<a+href="http://www.cnn.com"+alt="cnn"+title="cnn">
<span+class="cnn-b">
</a>|code-block|syntax|javascript|5166389|如果你这样做了，那么你唯一需要担心的就是确保显示图像，这可以通过将CSS中的跨度调整为正确的宽度和高度，并将显示设置为block+(block将允许它保持宽度)来实现：|5166390|.cnn-b+{
++++width:+200px;+height:+75px;
++++background:+url("cnn.png")+no-repeat+0+0;
++++display:+block;
}|5166391|下面是一个例子：http://jsfiddle.net/CPUKP/1/|offset|length|5166392|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/CPUKP/1/^0|0|0|0|0|0|8|S|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

I think there are several ways to do what you're talking about. 

It sounds like what you're talking about is simply having an image that is clickable. If that is the case then I would recommend putting the span inside the anchor tag:

<pre><code>&lt;a href="http://www.cnn.com" alt="cnn" title="cnn"&gt;
&lt;span class="cnn-b"&gt;&lt;/span&gt;
&lt;/a&gt;
</code></pre>

If you do that, then the only thing you need to worry about is making sure that the image is displayed which can be done by sizing the span in the CSS to the correct width and height and setting the display to block (block will allow it to keep the width):

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

Here's an example:
<a href="http://jsfiddle.net/CPUKP/1/" rel="nofollow">http://jsfiddle.net/CPUKP/1/</a>

blocks|key|1815631|text|默认情况下，span是一个内联元素。width和height属性在.cnn-b跨度上将不起作用。如果您将<span+class="cnn-b">更改为<div+class="cnn-b">，或者按照James的建议，在cnn-b跨度上使用display:block;，而不是cnn-text跨度，这将解决您的问题。您的最终代码应该如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1815632|<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
++++++++</a>
++++
</body>
</html>|code-block|syntax|javascript|1815633|entityMap^0|1G|K|23|J|3B|E|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|L|$]]

By default a span is an inline element. The width and height property will not work as you intend it on the .cnn-b span. If you change 
<code>&lt;span class="cnn-b"&gt;</code> to <code>&lt;div class="cnn-b"&gt;</code> or as suggested by James use <code>display:block;</code> on the cnn-b span not the cnn-text span That will solve your problem.
Your final code should be like this:

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

&lt;body&gt;
 &lt;span class="cnn-b"&gt;
 &lt;a href="http://www.cnn.com" alt="cnn" title="cnn"&gt;
 &lt;span class="cnn-text"&gt;cnn&lt;/span&gt;
 &lt;/a&gt;
 &lt;/span&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

I am trying to hide the text in a link and make the image visible only and the image click-able.

I am using the code below but the text doenst seem to hide.

<pre><code>&lt;span class="cnn-b"&gt;

&lt;a href="http://www.cnn.com" alt="cnn" title="cnn"&gt;
&lt;span class="cnn-text"&gt;cnn&lt;/span&gt;

&lt;/a&gt;&lt;/span&gt; 
css

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

css : text hidiing

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我试图隐藏链接中的文本，并使图像仅可见，图像可点击。我正在使用下面的代码，但文本似乎隐藏了。<a href="http://www.cnn.com" alt="cnn" title="cnn">cnn</a> css.cnn-b{ width: 200px; height: 75

问css :文本隐藏
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css :文本隐藏EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css :文本隐藏
EN