背景过滤器在 chrome 上的蒙版下不起作用答案

【问题标题】：backdrop-filter not working under a mask on chrome背景过滤器在 chrome 上的蒙版下不起作用
【发布时间】：2022-07-29 01:17:12
【问题描述】：

我需要屏蔽图像。蒙版应用模糊效果后应显示图像。为了实现这一点，我创建了一个具有属性 mask-image（也是 -webkit-mask-image）的 div 元素。在这个 div 中还有另一个 div 属性为背景过滤器（也是 -webkit-backdrop-filter）。

一切都在 Safari 上完美运行，我可以看到蒙版区域模糊了图像，但在 Chrome（mac 和 windows）和 Firefox（仅在 windows 上尝试）上，背景过滤器不再起作用。我可以说遮罩正在工作，因为如果我在移除背景过滤器后为模糊 div 设置背景颜色，我可以看到遮罩的颜色。

这是一个例子https://jsfiddle.net/tomthebearded/9nwm7k4g/40/。

.background,
.foreground {
  width: 100%;
  height: 100%;
  display: block;
  left: 0;
  top:0;
  position: relative;
  z-index: -1;
}

img {
  width: 100%;
  height: 100%;
}

.mask {
  -webkit-mask-size: 300px;
  -webkit-mask-position-x: 100px;
  cursor:crosshair;
  position: absolute;
  -webkit-mask-image: url('....');
  mask-image: url('...');
  z-index: 10;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.blur {
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

我需要保留这个 html 结构。

<div class="background">
  <img src="..." />
</div>

<div class="foreground mask">
  <div class="blur"></div>
</div>

还有其他方法可以实现吗？

提前谢谢你。

【问题讨论】：

这里也一样。我想这是不可能的。

标签： html css

【解决方案1】：

引用我在 bugs.chromium.com 上收到的答案：

根据规范 [1]，mask-image 创建一个背景根，并且背景过滤器仅适用于背景根（即不适用到视图背景）。

[1]https://drafts.fxtf.org/filter-effects-2/#BackdropRoot

Source

有趣的是，它可以在 Safari 上按预期工作，这意味着它们不会遵循规范，而是永远遵循规范

【讨论】：