向元素后面的区域添加图形效果:
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。
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:
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 参考:过滤属性
截取页面反馈部分,让我们更快修复内容!也可以直接跳过填写反馈内容!