背景过滤器与过滤器答案

【问题标题】：backdrop-filter vs filter背景过滤器与过滤器
【发布时间】：2018-06-21 12:34:50
【问题描述】：

最近我发现了2个相似的属性，不知道它们之间有什么区别。

你能解释一下吗？为什么属性backdrop-filter 和filter 同时存在？

正如我所见（here 和 here）他们做同样的事情：

什么时候应该使用backdrop-filter，什么时候应该使用filter？

caniuse.com 说（here 和 here）现代浏览器对 filter 的支持比 backdrop-filter 好得多。

【问题讨论】：

【解决方案1】：

根据https://iamvdo.me/en/blog/advanced-css-filters，filter会影响元素本身，background-filter会影响元素边界框内元素下方的元素。它看起来像一个带有黑色主体的页面和一个带有背景过滤器的元素：invert();会使身体的那部分变白。

backdrop-filter: invert();

此代码笔表明，在 Chrome 中，在 chrome://flags 中启用了 Experimental Web Platform 功能。

【讨论】：