css3-backdrop-filter

2805

使用backdrop-filter事项

在使用backdrop-filter时,有一些小细节需要注意:

  • 运用backdrop-filter元素的背景应该使用半透明,不然永远看不到效果

  • backdrop-filter属性和裁剪属性(如border-radiusmaskclip-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);
      }
    }

blob.pngQQ截图20160218111916.png