2

3 つの異なる画像があり、CSS を使用してスプライトを作成したいと考えています。HTTP リクエストが減少することを理解しています。ただし、私はこの概念にまったく慣れていないため、これにどのようにアプローチすればよいかわかりません。

私にとって最善の策は何ですか？また、画像の .zip を送信してそれらを結合する CSS スプライト ジェネレーターがいくつかあることも確認しました。

私はそれを試みましたが、何が起こっているのか理解できませんでした。CSS スプライトの作成と使用に関するガイダンスをいただければ幸いです。

更新: A List Part の記事を読みましたが、よくわかりませんでした。誰かが CSS スプライトの使用例を提供できますか? [回答の短い自己完結型の例は、他の場所の例への単なるリンクよりも SO に適しています。-編]

4

5 に答える 5

2

勉強する必要がある例は次のとおりです。

#nav li a {background-image:url('sprite.gif')}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}

Sprite.gifは、グリッド内のすべての小さい画像を含む大きな画像です（必ずしもそうである必要はありません）。次に、ポジショニングを使用して、画像を含むスプライトのその部分だけを表示します。

画像のセットを指定すると、小さな画像を見つける場所の座標を持つ大きなスプライト画像を返すオンラインツールがあります。

于 2010-05-30T14:33:39.677 に答える
1

CSS スプライト: その概要、クールな理由、および使用方法

代替テキスト
(ソース: css-tricks.com )

于 2010-05-28T21:18:51.630 に答える
0

スプライトを行うということは、小さな画像が 1 つの画像ファイルに並べられているということです。適切な画像編集プログラムがあれば、この単一の画像ファイルを自分で作成できます。次に、CSS のbackground-positionプロパティを使用して、そのスプライトに使用する画像の一部を指定できます。

于 2010-05-28T21:16:10.000 に答える
0

彼らが iGoogle に使用しているGoogle のスプライトを見てください。画像を 1 つの大きな画像に結合しているだけです。そうすれば、1 つの要求を行うことができます。次に、背景の配置と高さと幅を使用して、画像の必要な部分を選択します。

これは、ホバー状態が既にダウンロードされており、遅延がないため、ホバー時に変化する画像にも非常にうまく機能します。

于 2010-05-28T21:16:51.777 に答える
0

マウスオーバー時に背景画像を変更するボタンがあるとします。ユーザーに良いフィードバックを与えるには、マウスオーバーが即座に発生する必要があります。ボタン上の画像を単純に切り替えた場合、ブラウザは画像を取得するためにサーバーにアクセスする必要があり、効果が損なわれます。CSS スプライトを使用することで、各画像が読み込まれ、すぐにボタンに移動できるようになります。

また、一部のブラウザでは、画像を切り替えると「ちらつき」ます。CSS スプライトは、時々発生する可能性があるこのちらつきの問題を回避します。

于 2010-05-28T21:17:32.400 に答える