「background-size」を使用して CSS スプライトを効果的に拡大縮小する方法

背景サイズによる CSS スプライトのスケーリング

CSS スプライト (複数の小さい画像で構成される画像) は、HTTP リクエストを減らすための貴重な手法です。ただし、これらのスプライトをより小さい寸法に拡大縮小する必要がある場合、問題が発生する可能性があります。

たとえば、サイズが 100x100px のスプライトがあり、それを半分に縮小したいとします。 background-size プロパティを使用してもうまくいかないようです。

解決策:

鍵は、スプライトの元のサイズを理解することにあります。スプライト画像のサイズが 500x400 であると仮定します。半分に拡大縮小するには、background-size を次の寸法の半分に定義する必要があります:

background-size: 250px 200px;

さらに、必要な部分に確実にアクセスできるように、background-position を調整する必要がある場合があります。スプライト。たとえば、スプライトの左上の部分を表示するには、次のコマンドを使用できます。

background-position: 150px 0px;

これらの調整により、画像の必要な部分を維持しながら、CSS スプライトをより小さい寸法に効果的に拡大縮小できます。

以上が「background-size」を使用して CSS スプライトを効果的に拡大縮小する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。