0

ロゴとして機能する のような要素がある場合、anchor非常に大きな負の text-indent 値を使用します

a.logo {
  background: url(logo.gif) no-repeat;
  text-indent: -9999px;
}

そのロゴは画像のように見えますが、テキストは表示されません。
また、検索エンジンが見つけられるように、DOM にテキストが必要です。

でも、

  1. 私は巨大な負の値が好きではありません
  2. 一部のブラウザーやタブレットで、アコーディオンを開閉するシナリオで大きなスクロール可能要素を見たことがあります。
  3. ボックスモデルに従って、DOM要素の測定値に遭遇すると、ブラウザは少なくともその大きな値でボックスを描画すると聞いたことがあります。これは、ペイント中のパフォーマンスの問題になる可能性があります

また、透明化技術、最小のフォントサイズ、ロゴの背景とフォントの色のマッチングなどを使用している人々を見てきましたが、私にはエレガントに見えません。

HTML5 と CSS3 の後でも、表示されたテキストをユーザーから隠すセマンティックまたはエレガントな手法はありませんか?

4

2 に答える 2

0

h5bpのようにしないのはなぜですか？

.ir {
    border: 0;
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
    background: url(test.png);
    width: 300px;
    height: 75px;
}

参考までに、ここには多くの画像置換テクニックもあります。

于 2013-04-25T08:01:37.923 に答える
0

テキストのインデントを使用する必要はありません (必要ない場合)。これを試してください。

CSSコード

.logo{
    width:65px;
    height:0;
    background:url(logo.png) 0 0 no-repeat;
    font-size:0;
    line-height:0;
    padding-top:15px;
    overflow:hidden;
    display:block;
}
于 2013-04-25T08:19:55.313 に答える