如何在保持內容清晰的同時模糊 CSS 元素的背景圖片？-css教學-PHP中文網

如何在保持內容清晰的同時模糊 CSS 元素的背景圖片？

Susan Sarandon

發布： 2024-10-31 21:11:02

原創

1045 人瀏覽過

How to Blur the Background Image of an Element in CSS While Keeping the Content Sharp?

在CSS 中模糊背景圖像而不影響內容

在CSS 中，你可能會遇到這樣的情況：想要模糊某個物件的背景圖像元素而不影響其中的內容。以下是實現此目的的方法：

解決方案涉及建立一個繼承父元素背景圖像的偽元素 (:before)。然後將該偽元素絕對定位並給予模糊濾鏡。透過將其 z-index 設定為 -1，它會出現在內容後面。

要實現此目的，請套用以下CSS：

<code class="css">.blur-bgimage {
    overflow: hidden;
    margin: 0;
    text-align: left;
}

.blur-bgimage:before {
    content: "";
    position: absolute;
    width : 100%;
    height: 100%;
    background: inherit;
    z-index: -1;

    filter        : blur(10px);
    -moz-filter   : blur(10px);
    -webkit-filter: blur(10px);
    -o-filter     : blur(10px);

    transition        : all 2s linear;
    -moz-transition   : all 2s linear;
    -webkit-transition: all 2s linear;
    -o-transition     : all 2s linear;
}</code>

登入後複製

然後您可以使用JavaScript 來切換類別(例如，「blur-bgimage」）將此CSS 應用於所需的元素，根據需要模糊或取消模糊背景圖像。

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