backdrop-filter事项在使用backdrop-filter时,有一些小细节需要注意:
运用backdrop-filter元素的背景应该使用半透明,不然永远看不到效果
当backdrop-filter属性和裁剪属性(如border-radius、mask、clip-path等)结全在一起使用时,会有Bug产生
backdrop-filter可以创建一个堆栈文本(Stacking Context),类似于opacity属性一样
可以配合动画属性animation一起使用
到目前为止,仅有Safari浏览器支持,而且还需要添加前缀:-webkit-backdrop-filter,如果你使用autoprefixer这样的插件,无需考虑前缀
@supports (-webkit-backdrop-filter: none) {
.Box-header {
background: rgba(255,255,255,.6);
-webkit-backdrop-filter: brightness(1.5) blur(4px);
}
}
