Bagaimana untuk Mengalih keluar Kabur Latar Belakang daripada Elemen Kanak-kanak Sambil Mengekalkan Latar Belakang Kabur?-tutorial css-php.cn

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

509 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

Artikel sebelumnya：Berikut ialah beberapa tajuk artikel berasaskan soalan yang sesuai dengan kandungan anda, memfokuskan pada aspek penyelesaian masalah praktikal: * **Mengapa Kursor Tersuai Saya Tidak Dipaparkan dalam Firefox dan Chrome?** * **Cu Tersuai Artikel seterusnya：## Bagaimana untuk Mengubah Suai Peraturan CSS dengan JavaScript Tanpa Penggayaan Sebaris?

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

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

1676

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

1827

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

1553

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...