目录

CSS backdrop-filter 属性


示例

向元素后面的区域添加图形效果:

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

定义和用法

这个backdrop-filter属性用于将图形效果应用于元素后面的区域。

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

展示演示❯

默认值: 没有任何
遗传:
可动画: 不。阅读可动画的
版本: CSS3
JavaScript 语法: 对象.style.backdropFilter="grayscale(100%)"

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

-webkit- 后面的数字指定使用前缀的第一个版本。

Property
backdrop-filter 76.0 17.0 70.0* 9.0 -webkit- 63.0

* 要使其正常工作,请打开 about:config 并将 thelayout.css.backdrop-filter.enabled 设置为 true,并且 gfx.webrender.all 首选项需要设置为 true。



CSS 语法

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

属性值

Value Description Demo
none Default value. No filter is applied to the backdrop Demo ❯
filter A space-separated list of filter-functions like:
  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • sepia()
  • saturate()

or an url to an SVG filter that will be applied to the backdrop

Demo ❯
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

相关页面

CSS 参考:过滤属性

CSS 教程:CSS 图片

HTML DOM 参考:过滤属性