在某款洛谷美化样式的开发过程中，我遇到了一点问题，以下提供一个普遍性的问题描述：

1. 父元素定义了不为零的 opacity 值，且其的 background 为 none
2. 其的 ::before 元素定义了 backdrop-filter: blur() 试图进行毛玻璃效果的渲染。

预期行为：毛玻璃效果正常渲染，如：

实际行为：backdrop-filter 未正常应用

问题分析：父元素定义非零 opacity 值导致以其为根建立了新的 Backdrop Root，backdrop-filter 无法获取到更上层背景。

有什么方法可以避免其发生吗？注意，纯 CSS 美化脚本显然改动不了 dom。

可能对你了解问题情况和发生原理以及复现问题有帮助的链接：链接 1 链接 2。