對父元素應用模糊效果時如何保持子元素清晰？

在模糊背景下保持子元素清晰

當模糊效果對父元素時，此效果可能會擴展到其父元素子元素，模糊其內容。為了防止子元素出現這種不必要的模糊，有一個解決方案。

在父元素中建立一個新的 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中文網其他相關文章！