Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Mencegah Elemen Kanak-kanak daripada Mewarisi Kesan Kabur dalam CSS?

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

Linda Hamilton
Linda Hamiltonasal
2024-10-25 11:52:02191semak imbas

How to Prevent Child Elements from Inheriting Blur Effects in 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>
  1. 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn