Rumah > hujung hadapan web > Tutorial H5 > 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 css untuk mengelakkan kemahiran tutorial display_html5 berulang

WBOY
Lepaskan: 2016-05-16 15:49:16
asal
3562 orang telah melayarinya

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;
}

Label berkaitan:
sumber:php.cn
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan