CSS backdrop-filter 属性

定义和用法

backdrop-filter 属性用于对元素背后的区域应用图形效果。

提示：要看到效果，元素或其背景必须至少部分透明。

实例

为元素背后的区域添加图形效果：

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

亲自试一试

CSS 语法

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

属性值

值 描述
none 默认值。不对背景应用任何滤镜。
filter

由空格分隔的滤镜函数列表，如：

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • sepia()
  • saturate()

或指向 SVG 滤镜的 URL。

initial 将此属性设置为其默认值。参阅 initial。
inherit 从其父元素继承此属性。参阅 inherit。

技术细节

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

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

带有 -webkit- 前缀的数字表示首个支持该前缀的版本。

Chrome Edge Firefox Safari Opera
76 79 103 9 -webkit- 63

相关页面

教程：CSS 图像

参考：CSS filter 属性

参考：HTML DOM filter 属性