CSS中如何防止模糊效果扩展到子元素？

取消子元素的模糊效果

您有一个

具有模糊的背景图像，但模糊效果也扩展到其子元素。为了解决这个问题，请考虑以下方法：

创建一个单独的

在父 div 内并为其指定背景图像和模糊效果。确保此 div 的 z-index 低于不透明度 div。

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>

这将创建一个

;包含模糊背景图像而不影响子元素。

以上是CSS中如何防止模糊效果扩展到子元素？的详细内容。更多信息请关注PHP中文网其他相关文章！