Bagaimana Saya Boleh Menskalakan Sprite CSS Menggunakan `saiz latar belakang`?

Menskalakan Sprite CSS dengan Saiz Latar Belakang

Apabila menggunakan sprite CSS sebagai imej latar belakang, menskalakannya kepada dimensi yang lebih kecil boleh menjadi hasil yang diinginkan. Artikel ini membincangkan cara menskala sprite secara berkesan menggunakan sifat bersaiz latar belakang.

Isu: Ketidakupayaan untuk Menskala Sprite

Masalah biasa timbul apabila cuba menskala sprite kepada saiz yang lebih kecil, mengakibatkan imej penuh dipaparkan dan bukannya versi berskala yang dikehendaki.

Penyelesaian Menggunakan saiz latar belakang

Untuk skala sprite, adalah penting untuk memberi perhatian kepada dimensi imej sprite. Dalam contoh anda:

Dengan imej latar belakang ditetapkan kepada "https://i.sstatic.net/lJpW8.png," saiz imej ialah 500x400.

Untuk menskalakannya separuh, tentukan dimensi baharu dalam saiz latar belakang harta:

`

...
saiz latar belakang: 250px 200px;
...

`

Ini mengurangkan lebar dan tinggi sprite kepada 250px dan 200px, masing-masing.

Melaraskan Kedudukan Latar Belakang

Selain itu, untuk menyasarkan dan memaparkan ikon tertentu dalam sprite, laraskan sifat kedudukan latar belakang. Sebagai contoh, untuk memaparkan ikon yang terletak pada -200px 0px dalam imej bersaiz penuh asal, perkara berikut sudah memadai:

`

...
kedudukan latar belakang: 150px 0px;
...

`

Ingat, jarak anjakan untuk kedudukan latar belakang dibelah dua kerana sprite sedang diskalakan kepada separuh saiz asalnya. Ini memastikan ikon yang diingini dipaparkan.

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

css define for using Property this display position background https issue

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn