ジャンプ先:
画像スプライトは、複数の画像が使用されているWebアプリケーションで用いられます。
分割された画像ファイルをそれぞれ含めるよりも、1つの画像として送ることで、より一層メモリと帯域幅に優しく、HTTPリクエスト数を削減できます。
 

注意:  HTTP / 2を使用する場合、複数の小さなリクエストを使用する方が、実際には帯域幅に負荷を掛けない可能性があります。

実装

例えば、toolbtnクラスを持つすべてのアイテムに画像が与えられるとします:

.toolbtn {
  background: url(myfile.png);
  display: inline-block;
  height: 20px;
  width: 20px;
}

背景の位置は、backgroundの中でurl() の後にxとyの2つの値として、またはbackground-positionとして追加できます。
例:

#btn1 {
  background-position: -20px 0px;
}

#btn2 {
  background-position: -40px 0px;
}

これはID「btn1」の要素を左に20ピクセル、ID「btn2」の要素を左に40ピクセル移動します。
(これらの要素にはtoolbtnクラスが割り当てられており、上記の画像ルールの影響を受けているとします。)

同様に、ホバー状態にすることもできます:

#btn:hover {
  background-position: <右方向へ移動させたいピクセル数>px <下方向へ移動させたいピクセル数>px;
}

関連記事

ドキュメントのタグと貢献者

このページの貢献者: minamo
最終更新者: minamo,