Mengapa Kecerunan CSS3 Saya Tidak Meregang untuk Mengisi Keseluruhan Tetingkap Penyemak Imbas?

Regangan Kecerunan dalam CSS3

Apabila menentukan latar belakang kecerunan CSS3 untuk elemen, kecerunan tidak meregang untuk mengisi keseluruhan tetingkap penyemak imbas. Sebaliknya, ia berulang sehingga kawasan kandungan diisi. Tingkah laku ini boleh mengecewakan jika anda mahu kecerunan melangkaui kandungan.

Penyelesaian

Untuk membuat regangan kecerunan mengisi tetingkap penyemak imbas, gunakan CSS berikut :

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

Gaya ini mencapai perkara berikut:

• html { ketinggian: 100%; }: Menetapkan ketinggian elemen kepada 100%, memastikan latar belakang kecerunan boleh melangkaui kawasan yang boleh dilihat.
• badan { ketinggian: 100%; margin: 0; }: Menetapkan ketinggian elemen kepada 100% dan mengalih keluar sebarang jidar untuk menghapuskan potensi pertindihan antara kecerunan dan kandungan.
• latar belakang-ulang: tiada-ulang;: Menghalang kecerunan daripada berulang selepas mengisi kawasan kandungan.
• lampiran latar belakang: tetap;: Memastikan kecerunan kekal di tempatnya semasa bar skrol bergerak, mencipta kesan kecerunan berterusan sepanjang seluruh tingkap.

Atas ialah kandungan terperinci Mengapa Kecerunan CSS3 Saya Tidak Meregang untuk Mengisi Keseluruhan Tetingkap Penyemak Imbas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!