Bagaimana untuk Mengaburkan Latar Belakang Div Ibu Bapa Tanpa Menjejaskan Elemen Anak Hanya Menggunakan CSS?

Cara Mengaburkan Div Induk Tanpa Menjejaskan Elemen Anak (Penyelesaian CSS Sahaja)

Apabila menggunakan penapis CSS seperti kabur atau kelegapan pada div induk, elemen anak di dalamnya juga mungkin terjejas. Untuk menyelesaikan isu ini tanpa menggunakan kedudukan mutlak, pertimbangkan penyelesaian berikut:

Buat Div Berasingan untuk Latar Belakang dan Kandungan:

1. Buat dua div dalam div induk : satu untuk imej latar belakang dan satu lagi untuk kandungan.
2. Tetapkan kedudukan: relatif kepada ibu bapa div.

Div Latar Belakang Kedudukan Semestinya:

1. Berikan jawatan: mutlak; atas: 0; kanan: 0; bawah: 0; kiri: 0; ke div yang dimaksudkan untuk imej latar belakang.
2. Ini memastikan bahawa div latar belakang meliputi keseluruhan div induk.

Tambah Kabur pada Div Latar Belakang:

1. Gunakan penapis: sifat blur() pada latar belakang div.
2. Tetapkan indeks-z kepada nilai negatif (-1, contohnya) untuk meletakkannya di belakang div kandungan.

Contoh:

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

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

<div>

Dengan menggunakan kaedah ini, imej latar belakang boleh dikaburkan tanpa menjejaskan div kanak-kanak yang mengandungi kandungan.

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