CSS backdrop-filter 属性

主题

默认模式
浅蓝色模式
淡绿色模式
深夜模式

定义和用法

backdrop-filter是 CSS 的一个属性，用于对元素背后的区域应用图形效果（如模糊或颜色偏移）。

backdrop-filter非常适合创建磨砂玻璃（毛玻璃）效果。

默认值：	none
继承性：	否
动画制作：	支持。请参阅：动画相关属性。
版本：	CSS3
JavaScript 语法：	object.style.backdropFilter="grayscale(100%)"

常用的实例

接下来通过多个实例演示backdrop-filter属性的用法，来深化您对backdrop-filter属性的理解。

实例代码运行代码

复制

.effect-blur { backdrop-filter: blur(8px); }                /* 模糊效果 (blur) */
.effect-brightness { backdrop-filter: brightness(0.4);}     /* 亮度调节 (brightness) */
.effect-contrast { backdrop-filter: contrast(200%);}        /* 对比度调节 (contrast) */
.effect-grayscale { backdrop-filter: grayscale(100%);}      /* 灰度效果 (grayscale) */
.effect-hue-rotate { backdrop-filter: hue-rotate(90deg);}   /* 色相旋转 (hue-rotate) */
.effect-invert { backdrop-filter: invert(100%);}            /* 颜色反转 (invert) */
.effect-sepia { backdrop-filter: sepia(100%);}              /* 复古效果 (sepia) */
.effect-saturate { backdrop-filter: saturate(300%);}        /* 饱和度调节 (saturate) */

CSS 语法

backdrop-filter: none|filter;

属性值

值	描述
`none`	不对背景应用任何滤镜（默认值）。
`filter`	由空格分隔的滤镜函数列表，如： blur() brightness() contrast() drop-shadow() grayscale() hue-rotate() invert() opacity() sepia() saturate() 或指向 SVG 滤镜的 URL。