Komentar: Namun, setelah CSS3 muncul, situasi tampilan berulang ditingkatkan. Properti ukuran latar belakang dapat membuat harapan kami sebelumnya untuk meregangkan dan mengisi gambar latar belakang menjadi kenyataan. Metode penggunaan spesifik adalah sebagai berikut. Teman yang tertarik dapat merujuknya. Saya harap ini akan membantu semua orang.
Cara membuat latar belakang peregangan gambar, pertanyaan ini terdengar sederhana. Tapi aku minta maaf untuk memberitahumu. Tidak sesederhana yang kita pikirkan.Misalnya, atur latar belakang dalam wadah (body, div, span). Nilai panjang dan lebar latar belakang ini tidak dapat dimodifikasi sebelum CSS2.1.
Jadi hasil sebenarnya adalah bahwa itu hanya dapat ditampilkan berulang kali, sehingga properti seperti Repeat, Repeat-X, Repeat-y, no-repeat muncul. Ini digunakan untuk mengontrol tampilan gambar latar belakang. Oleh karena itu, ada dua jenis gambar latar belakang:
1. Ini adalah gambar besar, ukuran dan ukuran area hanya cocok
2. Bagan batang yang sangat kecil, setelah melewati pengulangan, membentuk latar belakang gambar besar yang sangat teratur.
Namun, setelah CSS3 muncul, situasi ini meningkat. Properti ukuran latar belakang dapat mewujudkan harapan kami sebelumnya.
Dan properti ini dapat digunakan di Firefox, Chrome, dan IE9.
Metode penggunaan spesifik adalah sebagai berikut:
Ukuran gambar latar belakang (representasi numerik):
#latar belakang {
Ukuran latar belakang: 200px 100px;
}
Ukuran gambar latar belakang (Persentase Representasi):
#latar belakang-ukuran2 {
Ukuran latar belakang: 30% 60%;
}
Ukuran gambar latar belakang (setara untuk memperluas gambar untuk mengisi elemen, mis. Nilai penutup):
#latar belakang-ukuran3 {
Ukuran latar belakang: penutup;
}
Ukuran gambar latar belakang (kurangi gambar dalam rasio yang sama untuk beradaptasi dengan ukuran elemen, yaitu, berisi nilai):
#latar belakang-ukuran4 {
Ukuran latar belakang: berisi;
}
Ukuran gambar latar belakang (mengisi elemen dengan ukuran gambar itu sendiri, mis. Nilai otomatis):
#latar belakang-ukuran5 {
Ukuran latar belakang: otomatis;
}