如何在CSS中模糊背景影像而不模糊內容？-css教學-PHP中文網

如何在CSS中模糊背景影像而不模糊內容？

Mary-Kate Olsen

發布： 2024-10-29 10:26:02

原創

323 人瀏覽過

How to Blur a Background Image in CSS Without Blurring the Content?

在保持內容清晰度的同時對背景影像進行CSS 模糊

嘗試在CSS 設定中模糊背景影像時，通常會遇到內容（文字或其他元素）也變得模糊的問題。這就是 z-index 和偽元素的概念發揮作用的地方。

要模糊背景影像而不影響內容，可以採用以下方法：

建立背景容器：將背景影像包含在div或其他容器中，並為其分配一個類，例如“blur-bgimage”。
引入偽元素： 在「blur-bgimage」類別中，加入一個偽類，例如：before。這會在容器後面建立一個繼承背景映像的圖層。
模糊背景：使用 CSS 濾鏡將模糊效果套用到偽元素。這將模糊繼承的背景圖像，而不影響內容。
覆蓋內容：將內容放入「blur-bgimage」容器中，確保其具有更高的z-index（例如，z-index：1）比模糊背景（z -index：0）。

以下是範例程式碼：

<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>

登入後複製

透過實現這種方法，您可以有效模糊背景圖像，同時保持內容的清晰度，從而實現視覺上吸引人的網站設計。

以上是如何在CSS中模糊背景影像而不模糊內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！