如何在保持模糊背景的同时去除子元素的背景模糊？

从子元素中删除背景模糊

您有一个

背景图像应用了模糊效果。但是，所有子元素也会受到这种模糊的影响，这是不希望的。本文提供了解决此问题的解决方案，允许您在保持背景图像的模糊效果的同时保留子元素的清晰度。

解决方案：创建叠加元素

要实现此目的，您可以创建一个单独的

在父元素中并将背景图像和模糊效果应用到这个新元素。然后，使用 z 索引值将此元素放置在现有子元素后面。

以下是修改后的 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>

在此设置中，.overlay 元素应用了模糊效果，而 .opacity 元素阻止此效果到达子元素，从而在模糊的背景上产生清晰且聚焦的子元素。

以上是如何在保持模糊背景的同时去除子元素的背景模糊？的详细内容。更多信息请关注PHP中文网其他相关文章！