应使用半透背景色而非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 作用于“背后”的内容，但如果你把文字、按钮这些放在同一层，它们也会被模糊——因为滤镜影响的是该元素背后的绘制区域，不是它自己。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 蒙罩层和内容层必须分层：蒙罩用 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 就可能让整块区域变成独立渲染单元。