Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mencegah Kesan Kabur daripada Melanjutkan kepada Elemen Kanak-kanak dalam CSS?
Bagaimana untuk Mencegah Kesan Kabur daripada Melanjutkan kepada Elemen Kanak-kanak dalam CSS?
- Susan Sarandonasal
- 2024-11-03 00:43:02282semak imbas
Batalkan Kesan Kabur pada Elemen Kanak-kanak
Anda mempunyai
dengan imej latar belakang yang kabur, tetapi kesan kabur juga meluas ke elemen anaknya. Untuk mengatasinya, pertimbangkan pendekatan berikut:
Buat
di dalam div induk dan tetapkan imej latar belakang dan kesan kabur kepadanya. Pastikan div ini mempunyai indeks-z yang lebih rendah daripada div kelegapan.
HTML:
<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>
Ini akan mewujudkan
yang mengandungi imej latar belakang kabur tanpa menjejaskan elemen kanak-kanak.
Atas ialah kandungan terperinci Bagaimana untuk Mencegah Kesan Kabur daripada Melanjutkan kepada Elemen Kanak-kanak dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
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