masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial css > teks badan

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

DDD
Lepaskan： 2024-11-19 04:58:02
asal
339 orang telah melayarinya

How Can I Effectively Scale CSS Sprites Using `background-size`?

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!

sumber：php.cn
Artikel sebelumnya：Sila berikan kandungan artikel supaya tajuk boleh dihasilkan yang sepadan dengan kandungan artikel. Artikel seterusnya：Bagaimana untuk Mendapatkan Hartanah CSS daripada Lembaran Gaya Luaran Tanpa Elemen Diberikan?
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
2
1955
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
10
2118
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
1786
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1687
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1696
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan