Mengapa Latar Belakang Kecerunan CSS3 Saya Tidak Menjangkau Ke Tinggi Tetingkap Penuh?

Isu Regangan Latar Belakang Kecerunan dalam CSS3

Masalah:

Walaupun menetapkan latar belakang kecerunan untuk elemen menggunakan kecerunan CSS3, ketinggian kecerunan kekal pada ketinggian kandungan, berulang untuk mengisi ruang tetingkap yang tinggal. Tingkah laku ini berlaku dalam kedua-dua penyemak imbas WebKit dan Gecko.

Penyelesaian:

Untuk memaksa kecerunan meregang ke ketinggian tetingkap, gunakan perkara berikut CSS:

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Penjelasan:

• html dan ketinggian badan ditetapkan kepada 100%, memaksa mereka mengisi keseluruhan ketinggian tingkap.
• margin: 0; pada badan mengeluarkan sebarang margin yang tidak diingini.
• latar belakang-ulang: tidak ulang; menghalang kecerunan daripada berulang.
• lampiran latar belakang: tetap; membetulkan kedudukan kecerunan, memastikan ia kekal pegun apabila saiz tetingkap diubah.

Penyelesaian ini memastikan kecerunan meregang secara menegak untuk mengisi keseluruhan ketinggian tetingkap, tanpa mengulangi atau mengganggu reka letak halaman.

Atas ialah kandungan terperinci Mengapa Latar Belakang Kecerunan CSS3 Saya Tidak Menjangkau Ke Tinggi Tetingkap Penuh?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!