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

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

CSS スプライトを背景画像として使用する場合、より小さなサイズにスケーリングすることが望ましい結果になる可能性があります。この記事では、background-size プロパティを使用してスプライトを効果的に拡大縮小する方法について詳しく説明します。

問題: スプライトを拡大縮小できない

スプライトをより小さいサイズに拡大縮小しようとすると、一般的な問題が発生します。目的の拡大縮小バージョンではなく、完全な画像が表示されます。

を使用した解決策background-size

スプライトを拡大縮小するには、スプライト画像の寸法に注意を払うことが重要です。あなたの例では:

背景画像を「https://i.sstatic.net/lJpW8.png」に設定すると、画像サイズは 500x400 になります。

半分に拡大縮小するには、background-size で新しい寸法を定義しますproperty:

`

...
背景サイズ: 250px 200px;
...

`

これにより、スプライトの幅と高さをそれぞれ 250px と 200px にします。

調整背景位置

さらに、スプライト内の特定のアイコンをターゲットにして表示するには、background-position プロパティを調整します。たとえば、元のフルサイズ画像の -200px 0px にあるアイコンを表示するには、次のようにすれば十分です:

`

...
background-position: 150px 0px;
...

`

覚えておいてください、スプライトが元のサイズの半分に拡大縮小されるため、background-position は半分になります。これにより、目的のアイコンが確実に表示されます。

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

css define for using Property this display position background https issue

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。