CSS スプライトを背景画像として適切に拡大縮小するにはどうすればよいですか?

背景画像として CSS スプライトを拡大縮小する

CSS スプライトを背景画像として使用する場合、場合によっては、より小さいサイズに縮小する必要があります。ただし、CSS で単に高さと幅を小さく指定するだけでは、必ずしも機能するとは限りません。

background-size プロパティを使用して CSS スプライトを正しく拡大縮小するには、次の点を考慮してください。

1.スプライト画像の寸法を決定します:

スプライト画像の寸法を確認して、正確に拡大縮小します。たとえば、スプライトが 500x400 ピクセルで、それを半分に縮小したい場合、新しい寸法は 250x200 ピクセルにする必要があります。

2.背景サイズで高さと幅の両方を指定:

背景サイズプロパティを定義するときは、高さと幅の両方の値を指定します。値を 1 つだけ使用すると歪みが生じます。

3.背景の位置をオフセットに調整します:

スプライトの背景をオフセットするには、background-position プロパティで負の値を使用します。これにより、スプライトの特定の部分のみを表示できます。

例:

.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;
}

以上がCSS スプライトを背景画像として適切に拡大縮小するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。