dialog::backdrop透明度只能通过background-color: rgba()设置，opacity和filter均无效；推荐rgba(0,0,0,0.3)~0.5，深色主题用rgba(255,255,255,0.15)；IE/旧Edge需JS手动插入遮罩层。
dialog::backdrop 的透明度只能用 background-color + rgba()
直接给 dialog::backdrop 设 opacity 无效——它不支持该属性，设了也没反应。真正起作用的只有 background-color 配 rgba()，比如 background-color: rgba(0, 0, 0, 0.4)。这个 0.4 就是遮罩层的透明度（alpha 值），数值越小越透，越大越暗。
常见错误是写成：dialog::backdrop { opacity: 0.4; } → 浏览器完全忽略，遮罩层保持默认不透明。
必须注意：dialog::backdrop 是一个伪元素，它没有子内容，所以不存在“文字被连带变淡”的问题；但你也不能用 filter: opacity()，它在部分浏览器中会触发重绘异常，且语义错误。
遮罩层透明度影响点击穿透和视觉层级
alpha 值低于 0.2 时，遮罩层太浅，用户容易误点背后内容；高于 0.6 又可能压住弹窗主体，尤其当 dialog 内容本身有半透背景时，会出现双重灰雾感。
- 推荐区间：
rgba(0, 0, 0, 0.3)～rgba(0, 0, 0, 0.5)，兼顾可访问性与视觉隔离 - 深色主题下可微调为
rgba(255, 255, 255, 0.15)，避免遮罩层发灰失焦 - 别用
hsla()替代——虽然语法合法，但dialog::backdrop对色相无感知，纯属多此一举
IE/旧 Edge 不支持 dialog::backdrop，需降级处理
IE 完全不识别 dialog 标签，旧版 Edge（≤18）也不支持 ::backdrop 伪元素。此时必须用 JS 手动插入遮罩层 DOM：
例如：
关键点：
- z-index 必须低于 dialog（通常 dialog 设
z-index: 1000），否则遮罩盖住弹窗 - 不能依赖
opacity控制遮罩，仍要用rgba()—— 否则 dialog 内部按钮、输入框也会变淡 - 需用 JS 监听
dialog.close或 ESC 键，同步remove()遮罩层，否则残留
透明度设置后 dialog 主体文字发虚？检查是否误加了 opacity
遮罩层透明不影响 dialog 主体，但如果主体文字模糊，大概率是你在 dialog 元素或其父容器上写了 opacity 或 filter。这两个属性会强制整棵树降透明，包括文字渲染质量。
典型翻车场景：
-
dialog { opacity: 0.95; }→ 文字边缘轻微糊，尤其在 macOS Retina 屏 -
.modal-wrapper { filter: blur(0.1px); }→ 看似没变化，实则触发布局重绘+透明合成 - 父级 CSS 框架（如 Bootstrap 5）悄悄加了
opacity: 1覆盖规则，导致你的rgba()被覆盖
用开发者工具检查 computed styles，重点看 opacity 和 filter 是否非 1 / none，而不是只盯着 background-color。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
