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 Sarandonasal
- 2024-10-25 02:20:02575semak imbas
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!