CSS - backdrop-filter 属性_CSS 菜鸟教程

CSS backgrounddrop-filter 属性用于向元素后面的区域添加图形效果，即添加到元素的背景中。由于此属性添加了模糊等效果，因此在元素后面，元素需要完全或部分透明才能使效果可见。

语法


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

属性值

值	描述
none	N不会将滤镜应用于元素的背面。默认值。
filter	以空格分隔的滤镜函数列表，例如 blur（）、brightness（）、contrast（）、drop-shadow（）、grayscale（）、hue-rotate（）、invert（）、opacity（）、sepia（）、saturate（）或将应用于背景的 SVG 滤镜的 url
initial	会将属性设置为其初始值。
inherit	将继承父元素的属性。

CSS 背景滤镜属性示例

以下是具有不同值的背景过滤器属性的示例。

无滤镜背景

为了避免将滤镜应用于元素的背景，我们使用 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>

模糊的背景

为了将模糊应用于元素的背景，我们使用模糊滤镜。以下示例显示了这一点。使用了 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>

背景亮度

要调整元素背景的亮度，请使用亮度拟合器。以下示例显示了这一点。已使用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>

背景的黑暗

为了调整元素背景的对比度，我们使用对比度滤镜。以下示例显示了这一点。已使用 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>

灰度背景

为了在元素的背景中添加灰度效果，我们使用灰度滤镜。以下示例显示了这一点。已使用 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>

背景的旋转颜色

为了向元素的背景添加色相旋转效果，我们使用了色相旋转滤镜。它通过围绕色轮旋转背景来改变背景的颜色。指定的角度决定了旋转方向。以下示例显示了这一点。已使用 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>

反转背景的颜色

为了将反转效果添加到元素的背景中，我们使用反转滤镜。它颠倒了背景的颜色并产生了负面影响。以下示例显示了这一点。反转滤波器的值为 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>

背景的透明度

为了调整元素背景的透明度效果，我们使用了不透明度滤镜。以下示例显示了这一点。使用了 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>

温暖的背景

为了添加棕褐色效果，模拟温暖的褐色色调到背景中，产生老照片效果，在元素的背景中，我们使用棕褐色滤镜。以下示例显示了这一点。棕褐色滤镜的值为 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>

背景的色彩强度

为了添加饱和度效果，该效果将颜色强度调整到元素的背景中，我们使用饱和度滤镜。以下示例显示了这一点。已使用 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>

对背景的多重滤镜效果

我们也可以同时使用多个过滤器。在以下示例中，使用了模糊和灰度滤镜。使用了 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>

支持的浏览器

属性
backdrop-filter	76.0	17.0	70.0	9.0	63.0

<< CSS - aspect-ratio 属性 CSS - backface-visibility 属性 >>