CSS スプライト内の画像のサイズを変更するにはどうすればよいですか?

CSS スプライトでの画像の拡大縮小

CSS スプライトでは、大きな画像から小さな画像をトリミングするのが一般的な手法です。しかし、切り取った部分のサイズを変更したい場合はどうすればよいでしょうか? CSS スプライトで画像を拡大縮小する方法は次のとおりです:

Background-size

ほとんどのブラウザが背景サイズをサポートしている場合は、次を使用できます:

background-size : 150% 150%;

ズームしてTransform:scale

ブラウザ間の互換性を確保するには、zoom と transform:scale:

[class^="icon-"]{
    zoom:0.5;
    -moz-transform:scale(0.5);
}

.icon-big{
    zoom:0.60;
    -moz-transform:scale(0.60);
}

.icon-small{
    zoom:0.29;
    -moz-transform:scale(0.29);
}

の組み合わせの使用を検討してください。Zoom:

• Webkit/Blink/IE でサポート
• スケールデフォルトのズーム設定に従って

Transform:scale:

• Mozilla、古い Opera でサポート
• デフォルトのズームとは独立してスケールします設定

このアプローチを使用すると、簡単に縮小または拡大できます。スプライト内のトリミングされた画像。たとえば、上記の例で「Item1、2、3、4」の隣にあるアイコンのサイズを小さくするには、単純にscale()を大きくします。必要に応じて、ズームまたはスケールの値を調整することもできます。

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