css - 背景过滤器与过滤器

Question

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

你能解释一下吗？为什么属性(property)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 , filter 将影响元素本身，而 background-filter 将影响元素边界框内元素下方的元素。它看起来像一个带有黑色主体和带有背景过滤器的元素的页面:invert();会使 body 的那部分变白。

backdrop-filter: invert();

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

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