Bagaimanakah Saya Boleh Skalakan Sprite CSS kepada Separuh Saiznya Menggunakan `saiz latar belakang`?

Menskalakan Sprite CSS Menggunakan saiz latar belakang

Sprites ialah teknik yang digunakan untuk menggabungkan berbilang imej menjadi satu imej, meningkatkan prestasi tapak web. Walau bagaimanapun, apabila menggunakan sprite sebagai imej latar belakang, anda mungkin menghadapi cabaran dalam menskalakannya kepada dimensi yang dikehendaki.

Cabaran:

Dalam senario khusus ini, matlamatnya adalah untuk menskalakan sprite 100px kali 100px kepada separuh saiznya menggunakan sifat bersaiz latar belakang. Kod semasa menghasilkan imej bersaiz penuh dipaparkan.

Penyelesaian:

Untuk mengatasi isu ini, anda perlu menentukan dimensi imej sprite. Dalam kes ini, memandangkan sprite ialah 500px kali 400px, anda boleh mengurangkannya separuh dengan menetapkan saiz latar belakang kepada 250px kali 200px. Selain itu, laraskan kedudukan latar belakang untuk mendapatkan ikon yang diingini.

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; /* for testing */
}

<div class="my-sprite"></div>

Dengan pelarasan ini, sprite akan dikecilkan kepada separuh saiz asalnya, menghasilkan imej 50px kali 50px. Nilai kedudukan latar belakang 150px 0px memastikan ikon yang dikehendaki kelihatan dalam sprite.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Skalakan Sprite CSS kepada Separuh Saiznya Menggunakan `saiz latar belakang`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!