背景过滤器与过滤器

Question

最近我发现了 2 个相似的属性，但无法弄清楚它们之间的区别是什么。

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

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

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

caniuse.com 说（这里和这里）现代浏览器filter比backdrop-filter.

Answer 1

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

backdrop-filter: invert();

这个代码笔表明，在 Chrome 中，在 chrome://flags 中启用了实验性 Web 平台功能。