传统操作
众所周知设置alpha通道后就可以实现元素的背景透明效果。然而0202年了元素早就过时了。想实现磨砂一样的效果的话应该怎么操作呢?
谈到模糊首先就是Filter Effects Module Level 1介绍的filter属性。给filter设置一个blur()就可以实现高斯模糊。当然,filter最常用的用法还是放在<html>上一键pay respect。
然而,filter仅对元素本身及它的后代生效,并且在计算的时候不会考虑背后是什么。它实现的是元素本身的模糊而不是元素的背景模糊,所以并不符合我们的要求。
然而,富有创造精神的前辈们早就开发出了一种替代方法:用background属性,使前面的元素和背景的背景图像“同步对齐”,具体可以看原文档。
不过,这种方法的适用性并不广。这种实现方法不仅需要你事先知道背景是什么,还无法适应多个元素堆叠的复杂情况。因此我一度还放弃了实现磨砂效果。
新操作
在去看苹果官网的标题栏实现时意外找到了这个Filter Effects Module Level 2介绍的新CSS属性backdrop-filter。相比filter,这个在Filter Effects Module Level 2才介绍的属性很晚才受到了主流浏览器的支持。在百度的搜索结果可能还停留在IE11时代的情况下,搜索不到这个属性可能也蛮正常的。
backdrop-filter的取值和filter是一致的,区别是filter作用于元素自身,而backdrop-filter作用于它背后的元素。
点击下面这个按钮就可以召唤一个不是很好拖的放大镜,在页面上拖一拖来试试backdrop-filter的效果。
此外,还意外地发现了:backdrop这个伪选择器,这个伪选择器我没有深究,但也是蛮好玩的。感兴趣可以去看MDN的相关文档,上面给了个:backdrop的用例。
封面图片https://www.foodiesfeed.com/free-food-photo/raw-dough-for-making-noodles/
Comments NOTHING