「background-size」プロパティを使用して CSS スプライトを拡大縮小するにはどうすればよいですか?

Background-Size プロパティを使用した CSS スプライトのスケーリング

要素の背景画像として CSS スプライトを使用する場合、次のような状況が発生する可能性があります。スプライトをより小さい次元にスケールダウンする必要があります。背景サイズ プロパティは、このスケーリングを簡単に実現するためのソリューションを提供します。

CSS スプライトをスケーリングするには、スプライトを含む要素の背景サイズ プロパティを定義するだけです。背景サイズに設定した値によって、スプライトのスケール サイズが決まります。たとえば、スプライトのサイズを半分に縮小したい場合は、background-size をスプライトの元の幅と高さの半分に設定します。

この例では、スプライトのサイズは 100x100px です。スプライトを半分のサイズに拡大するには、background-size プロパティを次のように変更します。

.my-sprite {
  background-size: 50px 50px;
}

スプライト シート内の目的のアイコンにアクセスできるように、background-position プロパティを適宜調整してください。スプライトを縮小すると、細部を失うことなく画像の小さいバージョンを表示できます。

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