css - 有没有办法使用css和清除空间来隐藏文本？

Question

我正在尝试为这个问题想出一个解决方案。

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

我想在表单上的文本包含在 bg 图像中，但是为了便于访问，我想将它包含在 H3 标记中。

我所拥有的解决方案遇到的问题是空间仍然被分配，我需要它被抑制。它也需要对 Google 友好。

这是我有的2个解决方案：

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 .. 演示

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