背景过滤器与过滤器

Question

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

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

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

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

什么时候应该使用 backdrop-filter 什么时候只需要 filter?

caniuse.com 说 (here and here) 现代浏览器支持 filter 比 backdrop-filter.

好得多

Answer 1

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

backdrop-filter: invert();

此 codepen 在 Chrome 中显示了这种情况，在 chrome://flags.

中启用了实验性 Web 平台功能

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

Answer 2

backdrop-filter 属性应用所选元素后面的效果。其中过滤器属性将效果应用于整个元素。

请看一下这个演示： https://codepen.io/AbidAlWassie/pen/yLvzLKx

body {
  background-color: black;
  color: white;
}

.backdrop-filter {
  background-image: url(https://images.pexels.com/photos/669015/pexels-photo-669015.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
  height: 400px;
}

.overlay {
  backdrop-filter: blur(2px);
  height: 100%;
  /* background-color: #ff000091; */
}

.filter {
  background-image: url(https://images.pexels.com/photos/669015/pexels-photo-669015.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
  filter: blur(2px);
  height: 400px;
}

<div class="backdrop-filter">
    <div class="overlay">
      <h1>backdrop-filter demo:</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, tenetur molestiae harum numquam nemo consectetur architecto optio asperiores animi debitis non hic fuga expedita vel voluptatibus, facilis possimus est voluptatum iusto quos nostrum tempora ducimus reprehenderit! Nobis facilis aliquid ea ab alias iure ipsam! Repellat, labore. Nostrum dignissimos minus non harum, eos totam, in asperiores magni rerum vero deleniti, expedita voluptatibus suscipit iusto inventore. Sunt tempora enim hic aliquid cupiditate porro vitae amet eum incidunt. Error, repellat! Similique, tempore enim?</p>
    </div>
  </div>
    
  <div class="filter">
    <h1>filter demo:</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, tenetur molestiae harum numquam nemo consectetur architecto optio asperiores animi debitis non hic fuga expedita vel voluptatibus, facilis possimus est voluptatum iusto quos nostrum tempora ducimus reprehenderit! Nobis facilis aliquid ea ab alias iure ipsam! Repellat, labore. Nostrum dignissimos minus non harum, eos totam, in asperiores magni rerum vero deleniti, expedita voluptatibus suscipit iusto inventore. Sunt tempora enim hic aliquid cupiditate porro vitae amet eum incidunt. Error, repellat! Similique, tempore enim?</p>
  </div>

背景过滤器与过滤器

backdrop-filter vs filter

css

css-filters