Bagaimana Saya Boleh Skala Sprite CSS Menggunakan Harta `bersaiz latar belakang`?

Menskala Sprite CSS Menggunakan Harta Bersaiz Latar Belakang

Apabila menggunakan sprite CSS sebagai imej latar belakang untuk elemen, anda mungkin menghadapi situasi di mana anda perlu mengecilkan sprite ke dimensi yang lebih kecil. Sifat bersaiz latar belakang menawarkan penyelesaian untuk mencapai penskalaan ini dengan mudah.

Untuk menskala sprite CSS, hanya tentukan sifat saiz latar belakang untuk elemen yang mengandungi sprite. Nilai yang anda tetapkan untuk saiz latar belakang menentukan saiz berskala sprite. Contohnya, jika anda ingin mengecilkan saiz sprite sebanyak separuh, tetapkan saiz latar belakang kepada separuh daripada lebar dan ketinggian asal sprite.

Dalam contoh yang disediakan, sprite mempunyai dimensi 100x100px. Untuk menskalakan sprite kepada separuh saiznya, ubah suai sifat saiz latar belakang seperti berikut:

.my-sprite {
  background-size: 50px 50px;
}

Ingat untuk melaraskan sifat kedudukan latar belakang dengan sewajarnya untuk mengakses ikon yang dikehendaki dalam helaian sprite. Dengan mengecilkan sprite, anda boleh memaparkan versi imej yang lebih kecil tanpa kehilangan sebarang butiran.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Skala Sprite CSS Menggunakan Harta `bersaiz latar belakang`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!