近日在看 caniuse 这个网站的时候,竟然发现firefox 103版支持backdrop-filter这个css属性了!并且从 mozilla发布日历 看到,这个版本将在2022年7月26发布。
这也是苹果在iOS7在2016年推出以来,毛玻璃效果终于覆盖全平台web浏览器了。
主流浏览器 | 支持backdrop-filter日期 |
---|
Safari | 2015年10月 |
Edge | 2018年4月 |
Chrome | 2019年7月 |
Firefox | 2022年7月 |
想了7年、等了7年、盼了7年,终于等到了。以后可以做毛玻璃的落地产品了,欧耶 !由此可以预见,去年在设计圈火起来的“玻璃拟态”也可以落地实现了。不知道有多少产品会真的去这么实现呢?
什么是backdrop-filter
正如上文所说一样,这个属性是将元素后面的其他元素进行一个滤镜处理。事实上,毛玻璃只是backdrop-filter: blur()的一个用法,除了元素背景模糊,还有很多属性值可以用:
功能 | 使用示例 |
---|
模糊图像 | backdrop-filter: blur(2px) |
让图像更明亮或更暗淡 | backdrop-filter: brightness(60%) |
增加或减少图像的对比度 | backdrop-filter: contrast(40%) |
在图像后方应用投影 | backdrop-filter: drop-shadow(4px 4px 10px blue) |
将图像转为灰度图 | backdrop-filter: grayscale(30%) |
改变图像的整体色调 | backdrop-filter: hue-rotate(120deg) |
反转图像颜色 | backdrop-filter: invert(70%) |
改变图像透明度 | backdrop-filter: opacity(20%) |
超饱和或去饱和输入的图像 | backdrop-filter: sepia(90%) |
将图像转为棕褐色 | backdrop-filter: saturate(80%) |
除此之外,这个属性还和transform属性一样,可以用空格将多个值连起来用:backdrop-filter: blur(4px) saturate(150%)
与filter异同
看起来上面的这些属性值filter也能用呀,那么有什么区别呢?
其区别在于backdrop-filter有层级特性,它会在只会在目标元素后(下层)应用图形效果,而filter是应用于图形本身。
性能
无论是filter还是backdrop-filter,都对性能有较大的影响,页面应用面积越大,越容易出现页面卡顿。大家一定要在外观效果和性能上权衡好哦~