CSS filter与backdrop-filter属性有什么不同之处？

本文共计942个文字，预计阅读时间需要4分钟。

还记得毛玻璃效果吗？不知道你是否用过filter属性设置过毛玻璃效果，实际上实现这个效果的最佳方案是使用backdrop-filter。因为filter会导致模糊四周暴露白色，模糊效果不均匀，而backdrop-filter则更加兼容。

还记得毛玻璃效果吗？不知道你是否用filter属性设置过毛玻璃效果，其实实现这个效果的最佳方案应该使用backdrop-filter，因为filter导致模糊四周露白，模糊不均匀，但是backdrop-filter的兼容性较差与filter，随着现代浏览器的发展，也兼容也逐渐跟上了，所以这个css属性我们还是可以尝试一下的。

在css中，有两个和滤镜相关的属性 — filter 和 backdrop-filter。

定义

backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。