我有一个容器元素，它具有可变的不透明度.它的子元素应该让背景变得模糊.
问题是背景滤镜仅在父对象的不透明度正好为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>