Bagaimana untuk Menskalakan Sprite CSS dengan betul sebagai Imej Latar Belakang?

Menskalakan Sprite CSS sebagai Imej Latar Belakang

Apabila menggunakan sprite CSS sebagai imej latar belakang, kadangkala perlu mengecilkannya kepada saiz yang lebih kecil. Walau bagaimanapun, hanya menentukan ketinggian dan lebar yang lebih kecil dalam CSS mungkin tidak selalu berfungsi.

Untuk menskala sprite CSS dengan betul dengan sifat saiz latar belakang, pertimbangkan perkara berikut:

1. Tentukan Dimensi Imej Sprite:

Semak dimensi imej sprite untuk menskalakannya dengan tepat. Contohnya, jika sprite ialah 500x400 piksel dan anda ingin mengurangkannya separuh, dimensi baharu hendaklah 250x200 piksel.

2. Tentukan Kedua-dua Tinggi dan Lebar dalam saiz latar belakang:

Apabila mentakrifkan sifat saiz latar belakang, nyatakan kedua-dua nilai ketinggian dan lebar. Menggunakan hanya satu nilai akan mengakibatkan herotan.

3. Laraskan kedudukan latar belakang kepada Offset:

Untuk mengimbangi latar belakang sprite, gunakan nilai negatif dalam sifat kedudukan latar belakang. Ini membenarkan anda menunjukkan bahagian sprite yang tertentu sahaja.

Contoh:

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

Atas ialah kandungan terperinci Bagaimana untuk Menskalakan Sprite CSS dengan betul sebagai Imej Latar Belakang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!