Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Mengalih keluar Kabur Latar Belakang daripada Elemen Kanak-kanak Sambil Mengekalkan Latar Belakang Kabur?

Bagaimana untuk Mengalih keluar Kabur Latar Belakang daripada Elemen Kanak-kanak Sambil Mengekalkan Latar Belakang Kabur?

Susan Sarandon
Lepaskan: 2024-10-25 02:20:02
asal
584 orang telah melayarinya

How to Remove Background Blur from Child Elements While Maintaining Blurred Background?

Alih keluar Kabur Latar Belakang daripada Elemen Kanak-kanak

Anda mempunyai

dengan imej latar belakang yang digunakan dengan kesan kabur. Walau bagaimanapun, semua elemen kanak-kanak juga dipengaruhi oleh kabur ini, yang tidak diingini. Artikel ini menyediakan penyelesaian untuk menyelesaikan isu ini, membolehkan anda mengekalkan kesan kabur pada imej latar belakang sambil mengekalkan kerangupan elemen kanak-kanak.

Penyelesaian: Cipta Elemen Tindanan

Untuk mencapai ini, anda boleh membuat

dalam elemen induk dan gunakan imej latar belakang dan kesan kabur pada elemen baharu ini. Kemudian, letakkan elemen ini di belakang elemen anak sedia ada menggunakan nilai indeks-z.

Berikut ialah struktur HTML yang diubah suai:

<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">
             a div wih all sort of information
        </div>
    </div>
</div></code>
Salin selepas log masuk

CSS:

<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>
Salin selepas log masuk

Dalam persediaan ini, elemen .overlay mempunyai kesan kabur yang digunakan, manakala elemen .opacity menyekat kesan ini daripada mencapai elemen kanak-kanak, menghasilkan elemen kanak-kanak yang tajam dan fokus pada latar belakang yang kabur.

Atas ialah kandungan terperinci Bagaimana untuk Mengalih keluar Kabur Latar Belakang daripada Elemen Kanak-kanak Sambil Mengekalkan Latar Belakang Kabur?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan