对话框背景置灰的本质是用 fixed 定位的半透明遮罩层覆盖内容，而非给 body 加灰度滤镜；需组合使用 fixed、inset-0、bg-black、bg-opacity-50 和 z-40，且遮罩层须与对话框同级并设置 aria-hidden="true"。
对话框背景置灰的本质是遮罩层叠加
不是给 body 加灰度滤镜，而是用一个全屏 fixed 定位的半透明层盖在内容上方。Tailwind 的 bg-opacity 必须配合 bg-black（或任意背景色）才生效，单独写 bg-opacity-50 没效果——这是最常卡住的地方。
关键点：opacity 作用于整个元素，而 bg-opacity 只控制背景色透明度，不影响子元素，更适合遮罩层场景。
必须设置的类名组合与顺序
遮罩层需同时满足：固定定位、覆盖全屏、背景半透、层级高于内容。推荐写法：
<div class="fixed inset-0 bg-black bg-opacity-50 z-40"></div>
-
fixed+inset-0确保铺满视口，比top-0 left-0 w-full h-full更简洁可靠 -
bg-black是前提，bg-opacity-50才能起作用；换成bg-gray-900也行，但 opacity 值需同步调高（如bg-opacity-40）才能达到相近灰度 -
z-40要大于对话框的z-50（否则遮罩会盖住对话框），常见 z-index 分级：遮罩用z-40，弹窗用z-50，顶部导航用z-30
为什么不能只用 opacity？
如果对遮罩层用 opacity-50，它会把内部所有子节点（比如误塞进来的按钮或文字）也变透明，失去语义和可访问性。而 bg-opacity 只动背景，干净利落。
立即学习“前端免费学习笔记（深入）”；
另外注意：IE 不支持 bg-opacity，若需兼容，得回退到 RGBA 写法，例如 bg-[#00000080]（Tailwind v3.3+ 支持）或直接写内联样式 style="background-color: rgba(0,0,0,0.5)"。
遮罩层要避免的 DOM 结构陷阱
遮罩层必须是对话框的兄弟节点，不能是父容器——否则对话框会被限制在遮罩的尺寸内，且 z-index 关系容易错乱。
- ✅ 正确结构：
<div class="fixed..."></div> <div class="fixed z-50..."></div>（同级、独立） - ❌ 错误结构：
<div class="fixed..."><div class="z-50"></div></div>（子元素无法突破父级 z-index 限制） - 遮罩层建议加
aria-hidden="true"，对话框加aria-modal="true"和role="dialog"，保障屏幕阅读器体验
inset-0 和 z-index 的配对校验——改了对话框的 z 值，忘了同步调高遮罩，或者滚动页面时遮罩没贴住视口顶部，八成是定位方式没用 fixed 或漏了 inset-0。 
