1

私は 4 つの画像を持っています。そのうちの 1 つは水平方向に背景の繰り返しプロパティを持ち、そのうちの 3 つは垂直方向に背景の繰り返しプロパティを持っています。

現在、この画像を次のように使用するさまざまな CSS クラスがあります。

.sb_header_dropdown {
     background: url(images/shopping_dropdown_bg.gif) repeat-y top left;
     padding: 8px 3px 8px 15px;
 }


 .shopping_basket_dropdown .sb_body {
     background: url(images/shopping_dropdown_body_bg.png) repeat-y top left;
     margin: 0;
     padding: 5px 9px 5px 8px;
     position: relative;
     z-index: 99999;
 }


 .checkout_cart .co_header_left {
     background: url(images/bg.gif) repeat-x 0 -150px;
     overflow: hidden;
     padding-left: 3px;
 }

 .sb_dropdown_footer {
     background: url(images/shopping_dropdown_footer_bg.png) repeat-y top left;
     clear: both;
     height: 7px;
     font-size: 0;
 }

ここで 4 つの HTTP リクエストを作成しています。HTTP リクエストの数を 4 から 1 に減らすことができるように、4 つの画像すべてに CSS スプライトを実装したいと考えています。 、x方向またはy方向のいずれかで、スプライトを作成する方法と、CSSで使用してHTTPリクエストの数を減らす方法。

この質問が明確であることを願っています。

4

3 に答える 3

3

スプライトは、同じ方向に繰り返される画像にのみ使用できます。これは、CSS で繰り返し可能な領域を制限する方法がないためです。そのため、横方向に繰り返している場合、繰り返したいセクションの横軸に沿って他の画像を配置することはできません。そうしないと、繰り返しに含まれてしまいます。そのため、背景が複数の方向に繰り返されるページは、背景画像のHTTP リクエストを 2 つ以上に減らすことができます。aと a

の 2 つのファイルを作成できます。リピート y を使用したすべての背景は、 の上端に沿って配置できます。繰り返し x を含むすべての背景 (今は 1 つだけですが、後で設定できます) は、の左端に沿って配置できます。sprite_repeaty.pngsprite_repeatx.pngsprite_repeaty.pngsprite_repeatx.png. 繰り返されないアイコンまたは背景がある場合は、これらのファイルのいずれかに含めることができます。画像を一定の間隔で配置すると、位置を適用するときにファイルをチェックする必要がなくなり、選択したスケールに応じて 、 、 などを簡単

に設定できるため、スプライトの維持が容易になります。background-position:0 0;background-position:0 -100px;background-position:0 -200px;

于 2010-06-02T00:01:57.323 に答える
1

CSS スプライトマップ (スプライトはspritemap内の 1 つの画像のみを参照します) は、すべての聖杯ではありません。すべての画像を 1 つに詰め込もうとするべきではありません。これは、そうしない場合の良い例です。これは、巨大なスプライトマップ画像になってしまうためです。パフォーマンスに関しては、2 番目の画像が小さくなります (別の要求を追加している間、正しいキャッシュ ヘッダーを送信すると仮定しています) は、より速く、より簡単で、より軽量なオプションです。

于 2010-06-01T18:01:21.970 に答える
1

実際に自動化された CSS の繰り返しを必要としない限り、画像内のスプライトを手動で繰り返す必要があります。

[1][2]\ [3][%][%][%][%][%][%][%][%]
[%][%] | [4][%][%][%][%][%][%][%][%]
[%][%] | \_________________________/
[%][%] | | | (横)
[%][%] |— 要素の最大可能性次元
[%][%] | （垂直）
[%][%] |
[%][%] |
[%][%]/

これは、主に必要な画像の大きさに応じて、特に価値がある場合とそうでない場合があります。

于 2010-06-01T17:57:07.017 に答える