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
打印页面
上一页
下一页
广告