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

從子元素中刪除背景模糊

您有一個

背景圖像應用了模糊效果。但是，所有子元素也會受到這種模糊的影響，這是不想要的。本文提供了解決此問題的解決方案，讓您在保持背景影像的模糊效果的同時保留子元素的清晰度。

解決方案：建立疊加元素

要實現此目的，您可以建立一個單獨的

在父元素中並將背景圖像和模糊效果應用到這個新元素。然後，使用 z 索引值將此元素放置在現有子元素後面。

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

在此設定中，.overlay 元素應用了模糊效果，而.opacity 元素阻止此效果到達子元素，從而在模糊的背景上產生清晰且聚焦的子元素。

以上是如何在保持模糊背景的同時去除子元素的背景模糊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！