Bagaimana Mengekalkan Elemen Kanak-kanak Tajam Apabila Menggunakan Kesan Kabur pada Elemen Induk?

Pastikan Elemen Kanak-kanak Tajam Di Bawah Latar Belakang Kabur

Apabila menggunakan kesan kabur pada elemen induk, ada kemungkinan kesan ini akan meluas ke elemen kanak-kanak, mengaburkan kandungannya. Untuk mengelakkan pengaburan elemen kanak-kanak yang tidak diingini ini, penyelesaian wujud.

Buat div baharu dalam elemen induk dan tetapkan imej latar belakang dengan kesan kabur. Letakkan div ini di belakang elemen anak dengan memberikan indeks z yang lebih rendah daripada tindanan. Gunakan struktur kod berikut:

<code class="html"><div class="content">
    <div class="overlay"></div>
    <div class="opacity">
        <div class="image">
            <img src="images/zwemmen.png" alt="" />
        </div>
        <div class="info">
            <!-- Information content -->
        </div>
    </div>
</div></code>

Gunakan kesan kabur pada div tindanan sambil memastikan div kelegapan tidak terjejas. Kod CSS:

<code class="css">.content .overlay {
    background-image: url('images/zwemmen.png');
    -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);
    z-index: 10;
}</code>

Atas ialah kandungan terperinci Bagaimana Mengekalkan Elemen Kanak-kanak Tajam Apabila Menggunakan Kesan Kabur pada Elemen Induk?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!