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="/static/imghwm/default1.png" data-src="images/zwemmen.png" class="lazy" 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中文網其他相關文章！