「background-size」を使用して CSS スプライトを半分のサイズに拡大するにはどうすればよいですか?

background-size を使用した CSS スプライトのスケーリング

スプライトは、複数の画像を 1 つの画像に結合して、Web サイトのパフォーマンスを向上させるために使用される手法です。ただし、スプライトを背景画像として使用する場合、スプライトを目的のサイズに拡大縮小するときに問題が発生する可能性があります。

課題:

この特定のシナリオでは、目標は拡大縮小することです。 100 ピクセル x 100 ピクセルのスプライトを、background-size プロパティを使用して半分のサイズに変更します。現在のコードでは、フルサイズの画像が表示されます。

解決策:

この問題を解決するには、スプライト イメージのサイズを定義する必要があります。この場合、スプライトは500px×400pxなので、background-sizeを250px×200pxに設定することで半分に縮小できます。さらに、背景の位置を調整して目的のアイコンを取得します。

例:

.my-sprite {
  background-image: url("https://i.sstatic.net/lJpW8.png");
  height: 50px;
  width: 50px;
  background-position: 150px 0px;
  background-size: 250px 200px;
  border: 1px solid; /* for testing */
}

<div class="my-sprite"></div>

これらの調整により、スプライトは次のように縮小されます。元のサイズの半分になり、50 ピクセル x 50 ピクセルの画像になります。背景位置の値を 150px 0px にすると、目的のアイコンがスプライト内に確実に表示されます。

以上が「background-size」を使用して CSS スプライトを半分のサイズに拡大するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。