Bagaimana untuk Menghalang Penapis Kabur daripada Menjejaskan Elemen Kanak-kanak?

Cara Menghilangkan Kesan Kabur pada Elemen Kanak-kanak

Apabila menggunakan penapis kabur pada elemen induk, ia kadangkala boleh menjejaskan elemen anak sebagai baiklah. Untuk mengelakkan kesan yang tidak diingini ini, penyelesaian bijak melibatkan mencipta div tambahan dalam elemen induk.

Penyelesaian:

1. Buat Div Tindanan:

   Sarang div dalam elemen induk dengan imej latar belakang yang sepadan dengan kesan kabur. Tetapkan ia indeks z yang lebih rendah daripada div induk.

   <code class="html"><div class="content">
       <div class="overlay"></div>
       <div class="opacity">...</div>
   </div></code>

   Salin selepas log masuk

2. Gunakan Kesan Kabur pada Div Tindanan:

   Gunakan kesan kabur ke div tindanan dan bukannya div induk menggunakan CSS:

   <code class="css">.content .overlay {
       background-image: url('...');
       -webkit-filter: blur(3px);
       -moz-filter: blur(3px);
       -o-filter: blur(3px);
       -ms-filter: blur(3px);
       filter: blur(3px);
       z-index: 0;
   }</code>

   Salin selepas log masuk

3. Div Kelegapan Kedudukan di Hadapan:

   Div kelegapan hendaklah diletakkan di hadapan div tindanan dengan indeks z yang lebih tinggi.

   <code class="css">.opacity {
       z-index: 10;
   }</code>

   Salin selepas log masuk

Faedah Pendekatan Ini:

• The kesan kabur terkandung dalam div tindanan, menghalangnya daripada menjejaskan elemen kanak-kanak.
• Div kelegapan boleh digunakan untuk mengawal kelegapan dan sifat lain kandungan tanpa mengganggu kesan kabur.

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Penapis Kabur daripada Menjejaskan Elemen Kanak-kanak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!