Bagaimanakah Saya Boleh Mengaburkan Latar Belakang Div Tanpa Mengaburkan Elemen Anaknya?

Mengaburkan Div tanpa Menjejaskan Elemen Kanak-kanak: Panduan

Selalunya, apabila menggunakan kabur pada div, pengguna menghadapi cabaran secara tidak sengaja unsur kanak-kanak kabur juga. Untuk menangani isu ini, adalah penting untuk memahami batasan sifat kabur dan kelegapan dalam CSS. Secara lalai, sifat ini mempengaruhi kedua-dua elemen induk dan anak di dalamnya.

Penyelesaian Alternatif: Mengasingkan Kandungan dan Latar Belakang

Untuk mengelakkan unsur anak kabur, penyelesaian yang berdaya maju adalah dengan buat dua elemen berasingan dalam div induk: satu untuk latar belakang dan satu lagi untuk kandungan.

Pelaksanaan:

1. Tetapkan kedudukan div induk kepada "relatif."
2. Buat elemen anak untuk latar belakang dan tetapkan kedudukannya kepada "mutlak," dengan nilai atas, kanan, bawah dan kiri 0 (atau tetapkan tinggi dan lebarnya kepada 100%).
3. Gunakan sifat kabur atau kelegapan pada elemen anak latar belakang.

Dengan mengasingkan latar belakang dengan cara ini, unsur anak kandungan tidak akan terjejas oleh kabur atau kelegapan digunakan pada induk div.

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 {
  /* Content properties here */
}

<div></div>

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengaburkan Latar Belakang Div Tanpa Mengaburkan Elemen Anaknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!