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); } }