0

私はこの問題の解決策を考え出そうとしています。

背景が画像であるコントロールがあります。

フォームに入れたいテキストはbg画像に含まれていますが、アクセシビリティのためにH3タグに入れたいと思います。

私が持っている解決策で私が遭遇した問題は、スペースがまだ割り当てられていて、それを抑制する必要があるということです。また、Google フレンドリーである必要もあります。

ここに私が持っている2つの解決策があります:

text-indent:-999px;

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

何か案は？

4

3 に答える 3

3

要素を非表示にする通常の方法は、次のいずれかを使用することです。

visibility:hidden;これは要素を非表示にしますが、それでもスペースを占有します。

display:none;要素を非表示にし、スペースを占有しません。

私は2番目がこの場合あなたが望むものであると信じています。

于 2012-11-05T09:37:33.360 に答える
1

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;
}
于 2012-11-05T09:46:58.150 に答える
1

さて、まずは

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.
于 2012-11-05T09:44:43.903 に答える