Bagaimanakah saya boleh mengubah saiz imej dalam CSS Sprite?

Menskalakan Imej dalam CSS Sprite

Dalam CSS sprite, memangkas imej yang lebih kecil daripada yang lebih besar ialah teknik biasa. Tetapi bagaimana jika anda ingin mengubah saiz bahagian yang dipotong? Begini cara menskalakan imej dalam sprite CSS:

Saiz latar belakang

Jika kebanyakan penyemak imbas anda menyokong saiz latar belakang, anda boleh menggunakan yang berikut:

background-size : 150% 150%;

Zum dan Transformasi:skala

Untuk keserasian merentas pelayar, pertimbangkan untuk menggunakan gabungan zum dan transform:skala:

[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);
}

.Zum:

• Disokong oleh Webkit/Blink/IE
• Skala mengikut zum lalai tetapan

Transform:scale:

• Disokong oleh Mozilla, Opera lama
• Skala secara bebas daripada tetapan zum lalai

Menggunakan pendekatan ini, anda boleh mengecilkan atau membesarkan imej yang dipangkas dengan mudah dalam sprite. Sebagai contoh, untuk mengurangkan saiz ikon di sebelah "Item1, 2, 3, 4" dalam contoh yang disediakan, cuma tingkatkan skala(). Anda juga boleh melaraskan nilai zum atau skala mengikut keperluan.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mengubah saiz imej dalam CSS Sprite?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!