Bagaimana untuk Menghalang Elemen Anak daripada Mewarisi Kesan Kabur CSS Ibu Bapa?

Isu Kabur CSS: Mengecualikan Elemen Anak daripada Kesan Kabur Ibu Bapa

Apabila menggunakan penapis kabur pada elemen induk menggunakan CSS, elemen anak juga tidak dapat dielakkan mewarisi kesan itu . Walau bagaimanapun, terdapat penyelesaian untuk mengecualikan elemen anak daripada kekaburan ini tanpa menggunakan kedudukan mutlak.

Untuk mencapai ini, buat dua div bersarang dalam div induk: satu untuk latar belakang dan satu lagi untuk kandungan. Tetapkan "position:relative" kepada div induk dan "position:absolute; top:0px; right:0px; bottom:0px; left:0px;" (atau tetapkan ketinggian/lebar kepada 100%) ke div latar belakang. Ini memastikan bahawa div latar belakang sepenuhnya meliputi div induk.

Dengan memisahkan elemen latar belakang daripada elemen kandungan, penapis kabur yang digunakan pada div latar belakang tidak akan menjejaskan elemen anak yang mengandungi teks atau kandungan lain yang diingini.

Berikut ialah contoh:

#parent_div {
  position: relative;
  height: 100px;
  width: 100px;
}

#background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  filter: blur(3px);
  z-index: -1;
}

<div></div>

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Elemen Anak daripada Mewarisi Kesan Kabur CSS Ibu Bapa?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!