Bagaimana menyelesaikan masalah latar belakang datuk yang menghalang unsur-unsur pseudo apabila kecerunan teks menambah bayang-bayang?

Penyelesaian Pandai: Kecerunan Teks Konflik dengan Latar Belakang Elemen Kakek

Dalam reka bentuk web, sangat biasa untuk mencipta kecerunan teks dan bayang-bayang dengan unsur-unsur pseudo, tetapi kadang-kadang anda menghadapi masalah unsur-unsur datuk yang melampaui unsur-unsur pseudo di latar belakang. Artikel ini akan menganalisis masalah ini secara mendalam dan menyediakan penyelesaian yang berkesan.

Pertama, mari kita lihat contoh kod biasa, yang boleh melaksanakan kecerunan teks dan bayang -bayang:

<div class="header">
  <p class="text" data-text="示例文本">Teks contoh</p>
</div>

.header {
  Lebar: 100%;
  Ketinggian: 100px;
  /* Menambah warna latar di sini akan menyekat pseudo-elemen*/
  latar belakang warna: #f0f0f0; 
}

.teks {
  -WebKit-Teks-Fill-warna: telus;
  Imej latar belakang: Gradien linear (ke bawah, merah 0%, hijau 100%);
  -WebKit-Background-Clip: Teks;
  Latar Belakang: Teks;
  saiz font: 40px;
  Font-Weight: Bold;
  Surat-Spacing: 9px;
}

.Text :: Sebelum {
  Kandungan: ATTR (data-teks);
  Kedudukan: Mutlak;
  warna: telus;
  Teks-bayang-bayang: 0 4px 2px biru;
  Z -indeks: -1; /* Nilai z-indeks negatif tidak sah*/
}

Apabila menambah warna latar belakang ke elemen .header , pseudo-element ::before akan dikaburkan. Ini kerana sifat kontekstual yang menyusun unsur-unsur pseudo. Ringkasnya, walaupun elemen pseudo dilampirkan secara visual pada elemen induk, ia berada pada tahap yang sama dengan unsur-unsur kanak-kanak lain dari elemen induk dalam susunan susunan. Walaupun z-index negatif ditetapkan, ia tidak boleh ditinggalkan di belakang latar belakang elemen datuk.

Penyelesaian: Laraskan konteks penyusunan

Untuk menyelesaikan masalah ini, kita perlu menaik taraf konteks cascaded elemen .text dan unsur-unsur pseudonya supaya lebih tinggi daripada latar belakang unsur datuk. Hanya tambah position: relative; dan nilai z-index positif kepada elemen .text :

 .teks {
  Kedudukan: Relatif;
  Z-indeks: 1; /* Tingkatkan pesanan penyusunan*/
  -WebKit-Teks-Fill-warna: telus;
  Imej latar belakang: Gradien linear (ke bawah, merah 0%, hijau 100%);
  -WebKit-Background-Clip: Teks;
  Latar Belakang: Teks;
  saiz font: 40px;
  Font-Weight: Bold;
  Surat-Spacing: 9px;
}

Dengan pengubahsuaian ini, elemen .text Dan elemen pseudonya akan diberikan dengan betul pada latar belakang elemen datuk, dengan itu menyelesaikan masalah oklusi. Ini adalah penyelesaian yang mudah dan berkesan tanpa operasi konteks cascading yang kompleks.

Atas ialah kandungan terperinci Bagaimana menyelesaikan masalah latar belakang datuk yang menghalang unsur-unsur pseudo apabila kecerunan teks menambah bayang-bayang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!