我有一个具有可变不透明度的容器元素。它的孩子应该投射背景模糊。
问题是，背景过滤器仅在父级的不透明度恰好为 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) => { …css ×1