Bagaimana untuk Mencegah Elemen Kanak-kanak daripada Mewarisi Kesan Kabur dalam CSS?

Mengalih keluar Kesan Kabur pada Elemen Kanak-kanak dengan CSS

Apabila menggunakan kesan kabur CSS pada elemen induk, adalah perkara biasa untuk menghadapi isu unsur kanak-kanak yang turut mewarisi kabur. Untuk menyelesaikan masalah ini, kita boleh membuat div berasingan dalam induk dan sebaliknya menggunakan kesan kabur padanya.

Pelaksanaan

1. Tambahkan div tambahan dalam div kandungan dan tetapkan ia kelas, seperti tindanan.

<code class="html"><div class="content">
  <div class="overlay"></div>
  <div class="opacity">
    <!-- Child elements... -->
  </div>
</div></code>

2. Dalam CSS, tetapkan kesan kabur dan imej latar belakang kepada div tindanan, memastikan indeks-znya lebih rendah daripada div kelegapan:

<code class="css">.content {
  float: left;
  width: 100%;
}

.content .overlay {
  background-image: url('images/zwemmen.png');
  height: 501px;
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);
  z-index: 0;
}

.opacity {
  background-color: rgba(5, 98, 127, 0.9);
  height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 10;
}</code>

Dengan memberikan div tindanan indeks z yang lebih rendah, elemen anak dalam div kelegapan akan diletakkan di atasnya, memastikan ia tidak terjejas oleh kesan kabur.

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Elemen Kanak-kanak daripada Mewarisi Kesan Kabur dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!