如果父对象的不透明度小于 1，则背景滤镜不适用

Question

我有一个具有可变不透明度的容器元素。它的孩子应该投射背景模糊。

问题是，背景过滤器仅在父级的不透明度恰好为 1 时适用。但是，如果我降低子级本身的不透明度，背景过滤器将保留。

谁能帮助我使这项工作正常进行？

我无法使用背景颜色来更改容器的不透明度。

#container{
  opacity: 1;
  position: absolute;
  top:0;
  width: 200px;
  height: 80px;
  outline: 0.1px solid black;
}

#child{
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px)
}

<div>This should be blurred</div>
<div id="container">
  <div id="child"></div>
</div>
<div style="position: absolute; top: 80px">
<span>Parent opacity:</span><input type="range" id="parentRange" min="0" step="0.01" max="1" value="1"><span id="parentReadout">1</span><br>
<span>Child opacity:</span><input type="range" id="childRange" min="0" step="0.01" max="1" value="1"><span id="childReadout">1</span>
</div>

<script>
parentRange.oninput = (e) => {
  container.style.opacity = e.target.value
  parentReadout.textContent = e.target.value
}
childRange.oninput = (e) => {
  child.style.opacity = e.target.value
  childReadout.textContent = e.target.value
}
</script>

Answer 1

看完规格后之后，如果没有一些未知的技巧，确实不可能做我想做的事。

\n

我引用了下面的两个关键部分，但主要思想是应用过滤器的元素是背景根和具有背景过滤器的元素之间的元素。背景根是至少符合一组标准之一的最近祖先，其中一个标准是不透明度 < 1。

\n

因此，在上面的场景中，父级成为背景根，模糊仅应用于它和子级之间的元素。

\n

规格：

\n

\n

元素 E 的背景根图像是通过以下步骤生成的最终图像：

\n

从背景根元素开始从E 的最近祖先的

\n

按绘制顺序绘制位于（并包括在内）\nancestor Backdrop Root 元素和元素 E 之间的所有内容。

\n

将绘制的内容展平到 2D 屏幕空间缓冲区中。

\n

将元素 E 的边框转换为 2D 屏幕空间，并将最终绘制的输出剪辑到此边框四边形。

\n

\n

和：

\n

\n

背景根由以下任一场景中的元素在文档中的任何位置形成。请参阅 \xc2\xa7\xe2\x80\xaf3.2 背景根触发器\n了解有关每个触发器的更多详细信息：

\n

文档 (HTML) 的根元素。

\n

具有除“none”之外的过滤器属性的元素。

\n

不透明度值小于 1 的元素。

\n

具有遮罩、遮罩图像、遮罩边框或剪辑路径属性\n且值不是 \xe2\x80\x9cnone\xe2\x80\x9d 的元素。

\n

背景过滤器值不是“none”的元素。

\n

mix-blend-mode 值不是“正常”的元素。

\n

\n