Bagaimana untuk Mengaburkan Latar Belakang DIV Ibu Bapa Tanpa Menjejaskan Elemen Anak?

Mengkaburkan Latar Belakang DIV tanpa Menjejaskan Elemen Kanak-kanak (Elakkan Kedudukan Mutlak)

Apabila menggunakan kesan kabur atau kelegapan pada elemen DIV induk, ia mempengaruhi elemen kanak-kanak juga. Untuk mengelakkan ini, penyelesaian kreatif diperlukan.

Penyelesaian Alternatif

Buat dua DIV anak dalam bekas induk:

• DIV Latar Belakang: Diletakkan sepenuhnya dalam induk (atas:0px; kanan:0px; bawah:0px; kiri:0px; atau 100% lebar/tinggi)
• Kandungan DIV: Diletakkan dalam DIV latar belakang dan mengandungi teks atau elemen lain

Kod 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 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<div>

Dengan pendekatan ini, kandungan DIV kekal tidak terjejas manakala latar belakangnya kabur.

Atas ialah kandungan terperinci Bagaimana untuk Mengaburkan Latar Belakang DIV Ibu Bapa Tanpa Menjejaskan Elemen Anak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!