传统操作
众所周知设置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