在模糊背景下保持子元素清晰
当对父元素应用模糊效果时，此效果可能会扩展到其父元素子元素，模糊其内容。为了防止子元素出现这种不必要的模糊，有一个解决方案。
在父元素中创建一个新的 div，并为其指定具有模糊效果的背景图像。通过给它一个比覆盖层更低的 z-index 来将此 div 放置在子元素后面。使用以下代码结构：
<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">
<!-- Information content -->
</div>
</div>
</div></code>将模糊效果应用于叠加 div，同时保持不透明度 div 不受影响。 CSS 代码：
<code class="css">.content .overlay {
background-image: url('images/zwemmen.png');
-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);
z-index: 10;
}</code>以上是对父元素应用模糊效果时如何保持子元素清晰？的详细内容。更多信息请关注PHP中文网其他相关文章！
