应使用半透背景色而非opacity：将opacity: 0.5改为background-color: rgba(0,0,0,0.5)，确保蒙罩与内容层平级分层；必要时用fixed定位或portal移出dom分支；backdrop-filter需内容层独立且避免transform触发新层叠上下文；固定弹窗需确保蒙罩z-index更高且同层叠上下文。
蒙罩层用了 opacity 导致子元素一起变透明怎么办
直接改 opacity 会让整个 DOM 树都继承透明度，子元素无法单独“撑起来”——这不是 bug，是 CSS 规范行为。真正该用的是半透背景，而不是对容器设透明度。
- 把
opacity: 0.5从蒙罩容器上拿掉，换成background-color: rgba(0, 0, 0, 0.5) - 确保蒙罩层和内部元素是平级关系（即子元素不被透明父容器包裹），比如用绝对定位把内容层盖在蒙罩层上方
- 如果必须用
opacity（比如动画过渡），那就把要保持不透明的元素移出该 DOM 分支，用position: fixed或 Portal 挂到 body 下
用 backdrop-filter 做毛玻璃蒙罩时内容发虚
backdrop-filter 作用于“背后”的内容，但如果你把文字、按钮这些放在同一层，它们也会被模糊——因为滤镜影响的是该元素背后的绘制区域，不是它自己。
- 蒙罩层和内容层必须分层：蒙罩用
backdrop-filter，内容用独立的div放在它上面（z-index 更高） - 避免给内容层加
transform（如translateZ(0)），否则可能触发新层叠上下文，导致 backdrop 失效 - 注意兼容性：
backdrop-filter在 Firefox 默认关闭，需手动开启layout.css.backdrop-filter.enabled；Safari 15.4+ 支持较好，Chrome 115+ 才稳定支持
蒙罩层遮不住固定定位的弹窗
常见于用 position: fixed 实现的 Modal 或 Tooltip，它们脱离文档流后，层叠顺序只看 z-index 和层叠上下文，跟 DOM 位置无关。
- 确认蒙罩层和弹窗都在同一个根层叠上下文里（比如都没被
transform、opacity、filter等触发新上下文） - 蒙罩层的
z-index必须严格大于弹窗的z-index；如果弹窗 z-index 是 9999，蒙罩至少设成 10000 - 别依赖父容器的 z-index 传递——
z-index不会继承，只对自身层叠上下文生效
opacity: 0.99 就可能让整块区域变成独立渲染单元。 
