CSS
CSSイメージスプライト

構文

• //バックグラウンド位置を使用する
  背景：url（ "sprite-image.png"）;
  バックグラウンドの位置：-20px 50px;
• //バックグラウンドプロパティの短縮形
  背景：url（ "sprite-image.png"）-20px 50px;

備考

基本的な実装

イメージスプライトとは何ですか？

イメージスプライトは、イメージスプライトシート内にある単一のアセットです。イメージスプライトシートは、そこから抽出できる複数のアセットを含むイメージファイルです。

例えば：

上の画像は画像スプライトシートで、これらの星のそれぞれはスプライトシート内のスプライトです。これらのスプライトシートは、ブラウザが必要とする可能性があるHTTPリクエストの数を減らすことによってパフォーマンスを向上させるので、便利です。

では、どのように実装しますか？ここにいくつかのコード例があります。

HTML

<div class="icon icon1"></div>
<div class="icon icon2"></div>
<div class="icon icon3"></div>

CSS

.icon {
    background: url(“icons-sprite.png”);
    display: inline-block;
    height: 20px;
    width: 20px;
}
.icon1 {
      background-position: 0px 0px;
}
.icon2 {
      background-position: -20px 0px;
}
.icon3 {
      background-position: -40px 0px;
}

スプライトの幅と高さを設定し、CSSのbackground-positionプロパティ（xとyの値を使用）を使用すると、CSSを使用してスプライトシートから簡単にスプライトを抽出できます。