Bagaimana untuk membuat imej latar belakang meregangkan dan mengisi css untuk mengelakkan kemahiran tutorial display_html5 berulang

Bagaimana untuk membuat imej latar belakang meregangkan dan mengisi, soalan ini kedengaran mudah. Tetapi saya minta maaf untuk memberitahu anda. Ia tidak semudah yang kita fikirkan.
Contohnya, tetapkan latar belakang dalam bekas (body, div, span). Panjang dan lebar latar belakang ini tidak boleh diubah suai sebelum CSS2.1.
Jadi hasil sebenar hanya boleh dipaparkan berulang kali, jadi atribut repeat, repeat-x, repeat-y, dan no-repeat muncul. Ia digunakan untuk mengawal paparan imej latar belakang. Jadi terdapat dua jenis imej latar belakang :

1 keseluruhan imej yang besar, saiznya betul-betul sepadan dengan saiz kawasan
2. Imej bar yang sangat kecil, Selepas diulang. , latar belakang gambar besar yang sangat biasa terbentuk.

Tetapi selepas kemunculan CSS3, keadaan ini telah bertambah baik. Harta bersaiz latar belakang boleh membuat hasrat kita sebelum ini menjadi kenyataan.
Dan sifat ini boleh digunakan pada firefox, chrome, dan ie9.

Kaedah penggunaan khusus adalah seperti berikut:
Saiz imej latar belakang (perwakilan angka):

Salin kod

Kodnya adalah seperti berikut:

#saiz latar belakang{
saiz latar belakang: 200px 100px;}

Saiz imej latar belakang (dinyatakan dalam peratusan):

Salin kodKod adalah seperti berikut:

#latar belakang -size2{
latar belakang-saiz:30% 60%;
}

Saiz imej latar belakang (besarkan imej secara berkadar untuk mengisi elemen, yang ialah, nilai penutup):

Salin kodKodnya adalah seperti berikut:

#background-size3{
background-size:cover ;
}

Saiz imej latar belakang (mengurangkan imej secara berkadar agar sesuai dengan saiz elemen, iaitu nilai kandungan) :

Salin kodKodnya adalah seperti berikut:

#background-size4{
saiz latar belakang:mengandungi;
}

Saiz imej latar belakang (isi elemen dengan saiz imej itu sendiri, iaitu nilai auto):

Salin kodKod adalah seperti berikut:

#latar belakang-saiz5{
latar belakang-saiz:auto;
}