Mengapa Kecerunan Linear Saya Hilang Apabila Saya Meletakkan Elemen Sama sekali?

Mengapa Kecerunan Linear Hilang Apabila Elemen Diposisikan Sama sekali?

Untuk memusatkan blok teks secara menegak dan mendatar pada skrin, pengguna sering menggunakan kedudukan tersebut : sifat mutlak untuk unsur. Walau bagaimanapun, kedudukan ini boleh menyebabkan latar belakang kecerunan linear hilang.

Untuk menyelesaikan isu ini, pastikan elemen badan mempunyai ketinggian yang mencukupi untuk memaparkan latar belakang. Tanpa ketinggian yang ditetapkan, latar belakang hanya akan muncul apabila terdapat kandungan pada halaman, yang boleh menyebabkan kehilangan kecerunan apabila elemen diletakkan secara mutlak.

Contohnya, menambah ketinggian min: 100vh ke elemen badan memastikan latar belakang sentiasa kelihatan, tanpa mengira kedudukan elemen:

<code class="css">body {
  background: linear-gradient(20deg, #B7B0F6, #B1D5F9);
  min-height: 100vh;
}

header {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}</code>

Atas ialah kandungan terperinci Mengapa Kecerunan Linear Saya Hilang Apabila Saya Meletakkan Elemen Sama sekali?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!