backdrop-filter vs filter

Question

最近我发现了2个类似的属性，无法弄清楚它们之间的差异。

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

我看到（here和here）他们做同样的事情：

• grayscale()
• sepia()
• saturate()
• hue-rotate()
• invert()
• opacity()
• brightness()
• contrast()
• drop-shadow()

我们何时应该使用backdrop-filter，何时只使用filter？

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

Answer 1

根据https://iamvdo.me/en/blog/advanced-css-filters，过滤器将影响元素本身，而backdrop-filter将影响元素边界框内元素下的元素。它看起来像一个黑色的主体和一个带有backdrop-filter的元素：invert（）;将身体的那部分变成白色。

backdrop-filter: invert();

此代码在Chrome中显示了这种情况，并在chrome：// flags中启用了实验性Web平台功能。

https://codepen.io/Jason_B/pen/wpjQGK