使用 css 隐藏文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/471510/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide text using css
提问by Micah
I have a tag in my html like this:
我的 html 中有一个标签，如下所示：
<h1>My Website Title Here</h1>
Using css I want to replace the text with my actual logo. I've got the logo there no problem via resizing the tag and putting a background image in via css. However, I can't figure out how to get rid of the text. I've seen it done before basically by pushing the text off the screen. The problem is I can't remember where I saw it.
使用 css 我想用我的实际标志替换文本。通过调整标签大小并通过 css 放置背景图像，我得到了徽标没有问题。但是，我不知道如何摆脱文本。我以前看到它基本上是通过将文本从屏幕上推开来完成的。问题是我不记得我在哪里看到的。
回答by nicholaides
This is one way:
这是一种方式：
h1 {
text-indent: -9999px; /* sends the text off-screen */
background-image: url(/the_img.png); /* shows image */
height: 100px; /* be sure to set height & width */
width: 600px;
white-space: nowrap; /* because only the first line is indented */
}
h1 a {
outline: none; /* prevents dotted line when link is active */
}
Here is another wayto hide the text while avoiding the huge 9999 pixel box that the browser will create:
这是隐藏文本同时避免浏览器将创建的巨大 9999 像素框的另一种方法：
h1 {
background-image: url(/the_img.png); /* shows image */
height: 100px; /* be sure to set height & width */
width: 600px;
/* Hide the text. */
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
回答by nesono
Why not simply use:
为什么不简单地使用：
h1 { color: transparent; }
回答by valk
Just add font-size: 0;to your element that contains text.
只需添加font-size: 0;到包含文本的元素。
.hidden { font-size: 0; } font-size: 0; hides text. <span class="hidden"> You can't see me :) </span>回答by Chris Farmiloe
The most cross-browser friendly way is to write the HTML as
最跨浏览器友好的方式是将 HTML 编写为
<h1><span>Website Title</span></h1>
then use CSS to hide the span and replace the image
然后使用 CSS 隐藏跨度并替换图像
h1 {background:url(/nicetitle.png);}
h1 span {display:none;}
If you can use CSS2, then there are some better ways using the contentproperty, but unfortunately the web isn't 100% there yet.
如果您可以使用 CSS2，那么有一些更好的方法可以使用该content属性，但不幸的是，Web 还不是 100%。
回答by Josh Crozier
Hiding text with accessibility in mind:
考虑到可访问性的隐藏文本：
In addition to the other answers, here is another useful approach for hiding text.
除了其他答案之外，这里还有另一种隐藏文本的有用方法。
This method effectively hides the text, yet allows it to remain visible for screen readers. This is an option to consider if accessibility is a concern.
这种方法有效地隐藏了文本，但允许它对屏幕阅读器保持可见。如果可访问性是一个问题，这是一个要考虑的选项。
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
It's worth pointing out that this class is currently used in Bootstrap 3.
值得指出的是，这个类目前在Bootstrap 3 中使用。
If you're interested in reading about accessibility:
如果您有兴趣阅读有关可访问性的内容：
回答by chocolata
Jeffrey Zeldman suggests the following solution:
Jeffrey Zeldman 提出以下解决方案：
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
It should be less resource intensive than -9999px;
它的资源密集程度应该低于 -9999px;
Please read all about it here:
请在此处阅读所有相关信息：
http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
回答by darasd
回答by Pier
So many complicated solutions.
这么多复杂的解决方案。
The easiest one is simply to use:
最简单的一种就是简单地使用：
color:rgba(0,0,0,0)
回答by Omid Ahmadyani
you can simply hide your text by add this attribute:
您可以通过添加此属性来简单地隐藏您的文本：
font size: 0 !important;
回答by jensimmons
Do not use { display:none; }It makes the content inaccessible. You want screen-readers to see your content, and visually style it by replacing the text with an image (like a logo). By using text-indent: -999px;or a similar method, the text is still there —?just not visually there. Use display:none, and the text is gone.
不要使用{ display:none; }它会使内容无法访问。您希望屏幕阅读器看到您的内容，并通过用图像（如徽标）替换文本来对其进行视觉设计。通过使用text-indent: -999px;或类似的方法，文本仍然存在——只是视觉上不存在。使用display:none，文本就消失了。
