Rumah  >  Artikel  >  hujung hadapan web  >  Mengapa Kecerunan Linear Saya Hilang Apabila Saya Meletakkan Elemen Sama sekali?

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

Barbara Streisand
Barbara Streisandasal
2024-10-30 06:12:28808semak imbas

Why Does My Linear-Gradient Disappear When I Position an Element Absolutely?

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!

Kenyataan:
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