使用css隐藏文本

我有一个标签在我的HTML这样的：

<h1>My Website Title Here</h1> 

使用CSS我想用我的实际标志replace文本。 我已经有了标志没有问题通过调整标签的大小和通过CSS的背景图像。 但是，我无法弄清楚如何摆脱文字。 基本上通过将文本推离屏幕，我已经看到了它。 问题是我不记得我在哪里看到它。

Answer 1

这是一个方法：

 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 */ } 

这是隐藏文本的另一种方法 ，同时避免浏览器将创build的巨大的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; } 

Answer 2

为什么不简单地使用：

 h1 { color: transparent; } 

Answer 3

只需添加font-size: 0; 包含文字的元素

 .hidden { font-size: 0; } 

  font-size: 0; hides text. <span class="hidden"> You can't see me :) </span> 

Answer 4

最具有跨浏览器友好的方式是将HTML编写为

 <h1><span>Website Title</span></h1> 

然后使用CSS来隐藏范围并replace图像

 h1 {background:url(/nicetitle.png);} h1 span {display:none;} 

如果你可以使用CSS2，那么有一些更好的方法使用content属性，但不幸的是，networking还没有100％。

Answer 5

请参阅mezzoblue ，了解各种技术的优秀摘要，优点和缺点，以及html和css示例。

Answer 6

杰弗里Zeldmanbuild议以下解决scheme：

 .hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; } 

它应该比-9999px;更less的资源密集-9999px;

请在这里阅读所有内容：

http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

Answer 7

隐藏可访问性的文本：

除了其他的答案，这里是另一个有用的隐藏文字的方法。

这种方法有效地隐藏文本，但允许屏幕阅读器保持可见。 如果无障碍是一个问题，这是一个选项。

 .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } 

值得指出的是，这个类目前在Bootstrap 3中使用 。

---

如果您有兴趣阅读有关辅助function：

• 无障碍网页倡议（WAI）

• MDN可访问性文档

Answer 8

不要使用{ display:none; } { display:none; }它使内容无法访问。 您希望屏幕阅读器查看您的内容，并通过用图像（如徽标）replace文本以可视化的方式进行devise。 通过使用text-indent: -999px; 或类似的方法，文本仍然存在 – 只是没有在视觉上。 使用display:none ，文本消失。

Answer 9

这实际上是一个成熟的讨论区，有许多微妙的技术可用。 select/开发满足您的需求的技术非常重要，包括：屏幕阅读器，图像/ css /脚本开/关组合，seo等。

下面是一些很好的资源，开始沿着标准的图像replace技术的道路：

http://faq.css-standards.org/Image_Replacement

http://www.alistapart.com/articles/fir

http://veerle.duoh.com/blog/links/#l-10

Answer 10

您可以使用css background-image属性和z-index来确保图像保留在文本的前面。

Answer 11

你为什么不使用：

 <li><a href="#">bla</a></li> a { opacity: 0.0; font-size: 1px; } li { background-image: url('test.jpg'); } 

如果你没有任何跨度或div元素，它完美的链接。

Answer 12

这么多复杂的解决scheme

最简单的就是使用：

 color:rgba(0,0,0,0) 

Answer 13

答案是创build一个与该属性的跨度

{display:none;}

你可以在这个网站find一个例子

Answer 14

 <style> body { visibility:hidden } body .moz-signature p{ visibility:visible } </style> 

以上在最新的Thunderbird中也运行良好。

Answer 15

使用条件标签为不同的浏览器，并使用CSS必须放置height:0px和width:0px也必须放置font-size:0px 。

Answer 16

 h1 { text-indent: -3000px; line-height: 3000px; background-image: url(/LOGO.png); height: 100px; width: 600px; /* height and width are a must */ } 

Answer 17

如果仅仅是使元素内的文本不可见，则使用rgba值（例如color:rgba(0,0,0,0);将color属性设置为0不透明度color:rgba(0,0,0,0); 干净而简单。

Answer 18

试试这个代码来缩短和隐藏文本

 .hidetxt{ width: 346px; display: table-caption; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: no-drop; } .hidetxt:hover { visibility: hidden; } 

 <div class="hidetxt"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when</p> </div> 

Answer 19

用CSS代替内容

  h1{ font-size: 0px;} h1:after { content: "new content"; font-size: 15px; } 

Answer 20

我通常使用：

 span.hide { position:fixed; right:-5000px; } 

Answer 21

如果我们可以编辑标记，生活可以更容易，只要删除文本，并开心。 但是有时候这个标记是通过JS代码来实现的，或者我们根本就不允许对它进行编辑，太糟糕了，CSS变成了我们可以使用的唯一武器。

我们不能放置<span>包装文本并隐藏整个标签。 顺便说一下，一些浏览器不仅隐藏元素与display:none但也禁用里面的组件。

font-size:0px和color:transparent可能是很好的解决scheme，但有些浏览器不理解它们。 我们不能依靠他们。

我build议：

 h1 { background-image: url(/LOGO.png); /* Our image */ text-indent: -3000px; /* Send text out of viewable area */ height: 100px; width: 600px; /* height and width are a must, agree */ overflow:hidden; /* make sure our size is respected */ } 

使用overflow:hidden强制我们的宽度和高度。 一些浏览器（不会命名它们… IE ）可能会读取宽度和高度作为min-width和min-height 。 我想防止箱子被放大。

Answer 22

对元素中的font-size和line-height使用零值对我来说是个诀窍：

 <style> .text { display: block; width: 200px; height: 200px; font-size: 0; line-height: 0; } </style> <span class="text"> Invisible Text </span> 

Answer 23

要从HTML中隐藏文本，请在CSS中使用text-indent属性

 .classname { text-indent: -9999px; white-space: nowrap; } 

/ *为dynamic文本，你需要添加空格，所以你应用的CSS不会打扰。 nowrap意味着文本将永远不会换行到下一行，文本继续在同一行，直到遇到一个<br>标记

Answer 24

这对我来说是有效的（敲除validation）。

 <span class="validationMessage">This field is required.</span> .validationMessage { background-image: url('images/exclamation.png'); background-repeat: no-repeat; margin-left: 5px; width: 16px; height: 16px; vertical-align: top; /* Hide the text. */ display: inline-block; overflow: hidden; font-size: 0px; } 

Answer 25

一个适合我的解决scheme：

HTML

 <div class="website_title"><span>My Website Title Here</span></div> 

CSS

 .website_title { background-image: url('..http://img.dovov.comhome.png'); background-repeat: no-repeat; height: 18px; width: 16px; } .website_title span { visibility: hidden; } 

Answer 26

最好的答案适用于短文本，但是如果文字换行，它只会显示在图像中。

一个办法就是用jquery处理程序捕获错误。 尝试加载图像，如果失败，则会引发错误。

 $('#logo img').error(function(){ $('#logo').html('<h1>My Website Title Here</h1>'); }); 

见示例代码

Answer 27

 h1{ background:url("..http://img.dovov.comlogo.png") no-repeat; height:180px; width:200px; display:inline-block; font-size:0px !important; text-intent:-9999999px !important; color:transparent !important; } 

Answer 28

我不记得我把它拿到哪里，但已经成功使用了很多年了。

  =hide-text() font: 0/0 a text-shadow: none color: transparent 

我的混音是在sass中，但是你可以以任何你认为合适的方式使用它。 对于好的方法，我通常在我的项目的某个地方保留一个.hidden类，以附加元素以避免重复。