” 画像スプライト 」は、複数の単一画像から構成される 1 つの大きな画像を作成する手法です。また、設計要件に応じて、大きな画像の任意の部分を表示できます。開発者が視覚的に魅力的な要素をスムーズに構築するのに役立ちます。画像スプライトは、アイコン、ボタン、その他のグラフィック要素に使用できます。この記事では、CSS で画像スプライトを使用する手順を段階的に説明します。
使い方Ⅰ Mage CSS のスプライト?
CSS では、開発者は画像スプライトを利用して、Web ページの読み込み時間を最小限に抑えます。これにより、HTTP リクエストが削減され、読み込みが高速化され、ユーザー エクスペリエンス要素が向上します。たとえば、以下の例を参照してください。
例: リスト項目での画像スプライトの使用
この例では、順序付きリストが作成され、各リスト項目でスプライト画像の一部が画面に表示されます。
前提条件:
画像スプライトから特定の画像を取得するには、使用されている画像スプライトの寸法が特に重要です。たとえば、「」という寸法の画像は、 937×156 」を以下に示します。
上に表示された画像の一部を表示するには、次の手順に従います。
ステップ 1: リスト項目の作成
以下のコード スニペットに示すように、順序なしリストが Web ページ上に生成されます。
< ウル >空： < それか ID = '空' > それか >
半分： < それか ID = '半分' > それか >
満杯： < それか ID = '満杯' > それか >
ウル >
上記のコード スニペットの説明:
-
- まず、「」を使用します。
- 次に「」のIDを割り当てます。 空 ”、” 半分 ' と ' 満杯 」 3 つのリスト項目について。これらは、後で大きな画像の一部を表示するために利用されます。
- まず、「」を使用します。
ステップ 2: 最初の画像を表示する
画像スプライトの最初の画像である空のハートを Web ページに表示します。使用 ' 空 ” id を入力し、次のコードを挿入します。
＃空 {幅: 157ピクセル;
高さ: 150ピクセル;
背景: URL ( .. / スプライト.jpg ) 0 0 ;
}
上記のコード行では次のようになります。
-
- まず、「」を設定します。 幅 ' と ' 身長 」 開発者が Web ページに表示したい画像の。
- これらのプロパティは「」の値に割り当てられます。 157ピクセル ' と ' 150ピクセル 上記の例によれば、これらは異なる寸法の画像に応じて異なる場合があります。
- 次に、「」のパスを指定します。 スプライト ”の画像を”に バックグラウンド ' 財産。次に、「」の方向を設定します。 0 ' と ' 0 」と入力すると、画像スプライトの最初の部分が表示されます。
上記のコード行を実行すると、Web ページは次のようになります。
上のスナップショットは、イメージ スプライトの最初のイメージが Web ページに表示されていることを示しています。
ステップ 3: 中間画像と最後の画像を表示する
画像スプライトの中央と最後の画像部分を表示するには、次の CSS プロパティを挿入します。
＃半分 {幅: 157ピクセル;
高さ: 150ピクセル;
背景: URL ( .. / スプライト.jpg ) -462ピクセル 0ピクセル
}
＃満杯 {
幅: 157ピクセル;
高さ: 150ピクセル;
背景: URL ( .. / スプライト.jpg ) -770ピクセル 0ピクセル
}
上記のコード スニペットの説明:
-
- まず、「」を選択します。 半分 」 id を指定し、上記の手順で使用したのと同じ CSS プロパティを挿入します。
- 画像スプライトから中央の画像を表示するには、方向を変更するか、左側からパディングを割り当てます。たとえば、左からの方向を「」に設定します。 マイナス462ピクセル ”。
- 同様に、左からの方向を「」にして最後の画像を表示します。 -770ピクセル ”。
上記の CSS プロパティを実行すると、Web ページは次のように表示されます。
上のスナップショットは、イメージ スプライトの 3 つのイメージが Web ページに表示されていることを示しています。
結論
” 画像スプライト 」は、コラージュ機能と同様に、複数の小さな画像を組み合わせて 1 つの大きな画像を構成します。また、小さい画像を表す大きな画像の任意の部分を表示できます。要件に従って、「」を使用して バックグラウンド 」プロパティは CSS によって提供されます。画像スプライトから特定の画像を表示するには、まず画像の幅と高さを設定します。その後、方向の値を利用して画像スプライトの画像の一部のみを表示します。