Alih keluar Kabur Latar Belakang daripada Elemen Kanak-kanak
Anda mempunyai
Penyelesaian: Cipta Elemen Tindanan
Untuk mencapai ini, anda boleh membuat
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>
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>
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!