Bagaimana Membuat Latar Belakang Kecerunan CSS Mengisi Keseluruhan Ketinggian Tetingkap Pelayar?

Mengurus Latar Belakang Kecerunan untuk Mengisi Ketinggian Tetingkap

Apabila menggunakan latar belakang kecerunan CSS3 pada elemen, ia secara lalai berulang dan bukannya meregangkan untuk mengisi keseluruhan tetingkap penyemak imbas. Walaupun diperhatikan dalam kedua-dua penyemak imbas berasaskan WebKit dan Gecko, tingkah laku ini adalah disengajakan.

Untuk membetulkannya, kecerunan perlu dikonfigurasikan:

1. Tetapkan Ketinggian HTML Elemen:

   html {
       height: 100%;
   }

   Salin selepas log masuk

2. Uruskan Elemen badan:

   body {
       height: 100%;               // Match the height of the HTML element
       margin: 0;                  // Remove any margins to ensure full window coverage
       background-repeat: no-repeat; // Prevent gradient repetition
       background-attachment: fixed; // Keep the gradient in position as the page scrolls (optional)
   }

   Salin selepas log masuk

Dengan menggunakan CSS ini gaya, latar belakang kecerunan kini akan meregangkan untuk mengisi tetingkap penyemak imbas, tanpa mengira ketinggian kandungan dalam .

Atas ialah kandungan terperinci Bagaimana Membuat Latar Belakang Kecerunan CSS Mengisi Keseluruhan Ketinggian Tetingkap Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!