0

behance.net サイトの css の一部を分析しようとしています。クロムインスペクターでかなり徹底的に調べましたが、理解できないことがいくつかあります。

上部のナビゲーション バーには、"Discover"、"Galleries"、"Jobs" というテキストがあり、div 内に記述されています。また、背景画像を含むclass="nav-text"クラスもあります。nav-sprite

nav-sprite {
background: url("http://assets.behance.net/img/sprites/nav.png?cb=1056284268") no-repeat;
display: block;
text-indent: -9999px;
}

ここでの背景 URL は、html で書かれているのと同じテキストを持つ png につながりますが、1 つの大きな画像になっています。こちらは黒背景です。まず第一に、解像度が信じられないほど低いです。第二に、とにかく同じことがhtmlに書かれているのに、なぜそこにあるのでしょうか? 背景 URL 画像のスクリーンショット

ありがとう！

4

3 に答える 3

2

フォントが原因で、テキストの代わりに画像を使用する可能性が最も高いです。text-indent: -9999px はページ外にテキストを設定し、nav-sprite のような CSS もあります:

background-position: -300px 0;
height: 14px;
width: 75px;

これらは、表示する画像の部分を設定します。

人々がテキストを入れる理由は、検索エンジンの目的と、css がオフになっている場合です。

于 2012-09-25T15:44:50.763 に答える
1

IE6 はまだ使用されており、カスタム フォントを (適切に) サポートしていないため、カスタム フォントで適切にレンダリングするように指定されています。

ただし、質問に適切に答えるために、HTML レイアウトは、アクセシビリティとフォールバックの両方の目的で、スタイルがなくてもセマンティックな意味を持つべきであるという考えがあります。これにより、完全にサポートされている場合は、メニュー内の項目がより豊富な要素に置き換えられます。

于 2012-09-25T15:42:04.463 に答える
0

HTML テキストは、Lynx (または CSS サポートのないもの) に似た検索エンジン ロボットまたはテキストベースのブラウザーに対してのみ存在します。text-indent: -9999px;引用したスタイル宣言のため、表示されません。代わりにbackground-image、特定のナビゲーション アイテムのクラスによって指定された からのスプライトが表示されます。例えば、

.nav-sprite-jobs {
    background-position: -269px 0;
    height: 11px;
    width: 30px;
}
于 2012-09-25T15:45:02.840 に答える