自分のナビゲーションバーをCSSスプライトに変換する

Question

私のウェブサイトのナビゲーションバーは、 'a'タグで囲まれた 'img'タグで構成されています。各imgには、ロールオーバーimgを表示するjavascript関数があります。だから、すべてのブラウザは18の画像をロードしなければならず、これは明らかに非常に非効率的な18のHTTPリクエストです。

私は、CSSの背景画像と：ホバー擬似クラスで1つのスピリチュアル画像を使用したいと思います。

問題は、私が背景画像に「a」だけを使用すると、高さと幅を設定できないということです。そして私がそれを設定すると、それはページの流れを破壊するよりもむしろ「ブロック」を表示します。すべてのインラインを維持しながら、CSS {背景画像}を使用する方法はありますか？

どうすればよいですか？ここ

サイトです：一般的にwww.thetempers.net

Answer 1

、あなたは予想通り、幅/高さを設定したい場合、あなたはブロックするディスプレイを設定する必要があります。

通常、それは垂直にもう一方の直後に配置されますが、おそらくあなたが望むものではありません。

float：leftも同様に適用してから、余白を付けて右にスペーシングしてみてください。

極端な負荷がかかっていない限り、スプライトのパフォーマンス上の利点はあまり目立たないかもしれません。多くの時間、それは頭痛の価値がない。

Answer 2

display: inline-blockを適用すると、aはimgのように動作します。

また、特定のケースでは、ホバー状態のために余分な画像を必要としないようです。あなたは、不透明度を適用することができ...

#nav-bar a { 
    display: inline-block; 
    background: [...]; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=80)"; 
    filter: alpha(opacity=80); 
    opacity: 0.8; 
} 

#nav-bar a:hover { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; 
    filter: alpha(opacity=100); 
    opacity: 1; 
} 

あなたは9つの要求と妥協、またはあなたがこのテクニックでスプライトを使用している場合は、ファイルサイズを減らすことができます。

Answer 3

display: inline-block; instedをdisplay: block; float: left;とすることもできますが、古いブラウザでは機能しません。 IE < 8.0。ブラウザのサポートについては、hereを確認できます。

スプライトは、サーバーへの要求の数を最小限に抑えます。このようにして、サーバーはCPUサイクルを少なくし、送信データは少し小さくなります。 ただし、ユーザーの最大の利点は、サイトをより早く獲得できることです。 動作方法は、ほとんどのブラウザではデフォルトで同じサーバーへの要求を一度に行うことがほとんどありません。そこでブラウザは最初のいくつかのファイルを要求し、それらのファイルの1つがダウンロードを終了したときにのみ次のファイルを要求します。 ファイルがかなりあります。