Bagaimana untuk mengaburkan Div Induk Tanpa Mengaburkan Elemen Anak?

Cara Mengelakkan Elemen Anak Kabur Apabila Mengaburkan Div Induk (Tanpa Kedudukan Mutlak)

Mengaburkan div induk menggunakan penapis CSS seperti kabur boleh tidak diingini blur elemen kanak-kanak juga. Walau bagaimanapun, terdapat penyelesaian untuk mengasingkan kesan kabur kepada hanya div induk tanpa menggunakan kedudukan mutlak.

Buat Elemen Dalam

Bahagikan div induk kepada dua elemen dalam :

• latar belakang: Bertanggungjawab untuk latar belakang kabur
• kandungan: Mengandungi elemen tidak kabur

Elemen Kedudukan

Gunakan gaya berikut:

• #parent_div: Tetapkan kedudukan: relatif kepada yang dibenarkan kedudukan mutlak unsur dalam.
• #latar belakang: Gunakan kedudukan: mutlak; atas: 0; kanan: 0; bawah: 0; kiri: 0; (atau tinggi/lebar: 100%) untuk meletakkannya tepat di atas div induk.
• #content: Kekalkan kedudukan lalainya: statik.

Memohon Kabur

Gunakan penapis: blur(3px) atau -webkit-filter: blur(3px) kepada #background, bukannya #parent_div. Ini memastikan bahawa kesan kabur dihadkan kepada elemen latar belakang, menjadikan elemen kandungan tajam dan tidak terjejas.

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;
}

#content {
  /* No special positioning required */
}

Atas ialah kandungan terperinci Bagaimana untuk mengaburkan Div Induk Tanpa Mengaburkan Elemen Anak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!