CSS - backdrop-filter 屬性

上一頁
下一頁

CSS backdrop-filter 屬性用於為元素後面的區域（即元素的背景）新增圖形效果。由於此屬性添加了諸如模糊之類的效果，因此元素需要完全或部分透明才能使效果可見。

語法

backdrop-filter: none | filter | initial | inherit;

屬性值

值 描述
none 不對元素的背面應用任何濾鏡。預設值。
filter 一個用空格分隔的濾鏡函式列表，例如blur()、brightness()、contrast()、drop-shadow()、grayscale()、hue-rotate()、invert()、opacity()、sepia()、saturate() 或指向將應用於背景的 SVG 濾鏡的 URL。
initial 將屬性設定為其初始值。
inherit 從父元素繼承屬性。

CSS 背景濾鏡屬性示例

下面描述了具有不同值的backdrop-filter 屬性的示例。

無濾鏡背景

要避免對元素的背景應用濾鏡，我們使用none 值。以下示例中顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .background-img {
            background: url(/css/images/white-flower.jpg) no-repeat center;
            background-size: cover;
            align-items: center;
            display: flex;
            justify-content: center;
            padding: 20%;
        }

        .nofilter-box {
            -webkit-backdrop-filter: none;
            backdrop-filter: none;
            color: white;
        }
    </style>
</head>

<body>
    <h1>CSS backdrop-filter property</h1>

    <div class="background-img">
        <div class="nofilter-box">
            <p>backdrop-filter: none</p>
        </div>
    </div>
</body>

</html>

模糊背景

要對元素的背景應用模糊效果，我們使用blur 濾鏡。以下示例中顯示了這一點。使用了 15px 的模糊。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .background-img {
            background: url(/css/images/white-flower.jpg) no-repeat center;
            background-size: cover;
            align-items: center;
            display: flex;
            justify-content: center;
            padding: 20%;
        }

        .blur-box {
            -webkit-backdrop-filter: blur(15px);
            backdrop-filter: blur(15px);
            color: white;
        }
    </style>
</head>

<body>
    <h1> CSS backdrop-filter property</h1>

    <div class="background-img">
        <div class="blur-box">
            <p>backdrop-filter: blur(15px)</p>
        </div>
    </div>
</body>

</html>

背景亮度

要調整元素背景的亮度，使用brightness 濾鏡。以下示例中顯示了這一點。使用了 50% 的亮度。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .background-img {
            background: url(/css/images/white-flower.jpg) no-repeat center;
            background-size: cover;
            align-items: center;
            display: flex;
            justify-content: center;
            padding: 20%;
        }

        .bright-box {
            -webkit-backdrop-filter: brightness(50%);
            backdrop-filter: brightness(50%);
            color: white;
        }
    </style>
</head>

<body>
    <h1> CSS backdrop-filter property</h1>

    <div class="background-img">
        <div class="bright-box">
            <p>backdrop-filter: brightness(50%)</p>
        </div>
    </div>
</body>

</html>

背景暗度

要調整元素背景的對比度，我們使用contrast 濾鏡。以下示例中顯示了這一點。使用了 10% 的對比度。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .background-img {
            background: url(/css/images/white-flower.jpg) no-repeat center;
            background-size: cover;
            align-items: center;
            display: flex;
            justify-content: center;
            padding: 20%;
        }

        .contrast-box {
            -webkit-backdrop-filter: contrast(10%);
            backdrop-filter: contrast(10%);
            color: white;
        }
    </style>
</head>

<body>
    <h1> CSS backdrop-filter property</h1>

    <div class="background-img">
        <div class="contrast-box">
            <p>backdrop-filter: contrast(10%)</p>
        </div>
    </div>
</body>

</html>

灰度背景

要為元素的背景新增灰度效果，我們使用grayscale 濾鏡。以下示例中顯示了這一點。使用了 70% 的灰度值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .background-img {
            background: url(/css/images/white-flower.jpg) no-repeat center;
            background-size: cover;
            align-items: center;
            display: flex;
            justify-content: center;
            padding: 20%;
        }

        .gray-box {
            -webkit-backdrop-filter: grayscale(70%);
            backdrop-filter: grayscale(70%);
            color: white;
        }
    </style>
</head>

<body>
    <h1> CSS backdrop-filter property</h1>

    <div class="background-img">
        <div class="gray-box">
            <p>backdrop-filter: grayscale(70%)</p>
        </div>
    </div>
</body>

</html>

旋轉背景顏色

要為元素的背景新增色相旋轉效果，我們使用hue-rotate 濾鏡。它透過圍繞色輪旋轉來更改背景的顏色。指定的角度決定旋轉方向。以下示例中顯示了這一點。使用了 120 度的角度。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .background-img {
            background: url(/css/images/white-flower.jpg) no-repeat center;
            background-size: cover;
            align-items: center;
            display: flex;
            justify-content: center;
            padding: 20%;
        }

        .hue-box {
            -webkit-backdrop-filter: hue-rotate(120deg);
            backdrop-filter: hue-rotate(120deg);
            color: white;
        }
    </style>
</head>

<body>
    <h1>CSS backdrop-filter property</h1>

    <div class="background-img">
        <div class="hue-box">
            <p>backdrop-filter: hue-rotate(120deg)</p>
        </div>
    </div>
</body>

</html>

反轉背景顏色

要為元素的背景新增反轉效果，我們使用invert 濾鏡。它反轉背景的顏色併產生負片效果。以下示例中顯示了這一點。為反轉濾鏡提供了 70% 的值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .background-img {
            background: url(/css/images/white-flower.jpg) no-repeat center;
            background-size: cover;
            align-items: center;
            display: flex;
            justify-content: center;
            padding: 20%;
        }

        .invert-box {
            background-color: rgba(255, 255, 255, 0.4);
            -webkit-backdrop-filter: invert(70%);
            backdrop-filter: invert(70%);
            color: white;
        }
    </style>
</head>

<body>
    <h1>CSS backdrop-filter property</h1>

    <div class="background-img">
        <div class="invert-box">
            <p>backdrop-filter: invert(70%)</p>
        </div>
    </div>
</body>

</html>

背景透明度

要調整元素背景的透明度效果，我們使用opacity 濾鏡。以下示例中顯示了這一點。使用了 10% 的不透明度。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .background-img {
            background: url(/css/images/white-flower.jpg) no-repeat center;
            background-size: cover;
            align-items: center;
            display: flex;
            justify-content: center;
            padding: 20%;
        }

        .opacity-box {
            -webkit-backdrop-filter: opacity(10%);
            backdrop-filter: opacity(10%);
            color: white;
        }
    </style>
</head>

<body>
    <h1>CSS backdrop-filter property</h1>

    <div class="background-img">
        <div class="opacity-box">
            <p>backdrop-filter: opacity(10%)</p>
        </div>
    </div>
</body>

</html>

暖色背景

要為背景新增模擬溫暖的棕褐色色調，從而產生舊照片效果，我們使用sepia 濾鏡。以下示例中顯示了這一點。為 sepia 濾鏡提供了 90% 的值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .background-img {
            background: url(/css/images/white-flower.jpg) no-repeat center;
            background-size: cover;
            align-items: center;
            display: flex;
            justify-content: center;
            padding: 20%;
        }

        .sepia-box {
            -webkit-backdrop-filter: sepia(90%);
            backdrop-filter: sepia(90%);
            color: white;
        }
    </style>
</head>

<body>
    <h1> CSS backdrop-filter property</h1>

    <div class="background-img">
        <div class="sepia-box">
            <p>backdrop-filter: sepia(90%)</p>
        </div>
    </div>
</body>

</html>

背景顏色強度

要為元素的背景新增飽和度效果，該效果調整顏色的強度，我們使用saturation濾鏡。以下示例中顯示了這一點。使用了 180% 的飽和度。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .background-img {
            background: url(/css/images/white-flower.jpg) no-repeat center;
            background-size: cover;
            align-items: center;
            display: flex;
            justify-content: center;
            padding: 20%;
        }

        .saturate-box {
            -webkit-backdrop-filter: saturate(180%);
            backdrop-filter: saturate(180%);
            color: white;
        }
    </style>
</head>

<body>
    <h1> CSS backdrop-filter property</h1>

    <div class="background-img">
        <div class="saturate-box">
            <p>backdrop-filter: saturate(180%)</p>
        </div>
    </div>
</body>

</html>

對背景應用多個濾鏡效果

我們還可以同時使用多個濾鏡。在以下示例中，使用了blur 和grayscale 濾鏡。使用了 2px 的模糊和 70% 的灰度值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .background-img {
            background: url(/css/images/white-flower.jpg) no-repeat center;
            background-size: cover;
            align-items: center;
            display: flex;
            justify-content: center;
            padding: 20%;
        }

        .multi-box {
            -webkit-backdrop-filter: blur(2px) grayscale(70%);
            backdrop-filter: blur(2px) grayscale(70%);
            color: white;
        }
    </style>
</head>

<body>
    <h1> CSS backdrop-filter property</h1>

    <div class="background-img">
        <div class="multi-box">
            <p>backdrop-filter: blur(2px) grayscale(70%)</p>
        </div>
    </div>
</body>

</html>

支援的瀏覽器

屬性 Chrome Edge Firefox Safari Opera
backdrop-filter 76.0 17.0 70.0 9.0 63.0
css_properties_reference.htm
列印頁面
上一頁
下一頁
廣告

© . All rights reserved.