有没有办法使用CSS和空格隐藏文本？

Question

我正在尝试为这个问题找到解决方案。

我有一个控件，背景是图像。

我希望在表单上包含的文本包含在bg图像中，但是为了accessibilty，我想将它包含在H3标记中。

我遇到的问题是我的解决方案是空间仍然分配，我需要它被压制。它也需要谷歌友好。

这是我的两个解决方案：

text-indent:-999px;

text-indent:100%;  
white-space:nowrap;  
overflow:hidden;

有什么想法吗？

Answer 1

隐藏元素的常用方法是使用以下方法之一：

visibility:hidden;隐藏元素但仍然占用空间。

display:none;隐藏元素并且不占用空间。

我相信第二个就是你想要的东西。

Answer 2

嗯，首先

display: none;

但是，如果您愿意，可能还有其他解决方案来标注标题标记

/* on its container */
overflow: hidden;

/* on h3 tag */
float: left;
margin-left: -100%;

或

font-size: 0;
line-height: 0;
height: 0;
overflow: hidden;

您可能还需要设置/重置其他一些属性，以清除标题周围的任何其他空间，例如

margin, padding, white-space, text-indent, border, etc.

Answer 3

您可以将font-size:0;提供给 h3 标记，HEADING将以您的背景显示在您的代码中。 这将帮助你 SEO 也.. 的 DEMO

<强> HTML

<div id="wrap">    
  <h3>heading</h3>
</div>

<强> CSS

#wrap {
   height: 230px;
   width:660px;
   background:url("http://www.eldercarefunding.org/Portals/18/Skins/s_eldercare_green/images/header.bgL.png") no-repeat 0 0;

}
#wrap h3 {
  font-size:0;
}