对话框背景置灰的本质是用 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 只动背景，干净利落。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

另外注意：IE 不支持 bg-opacity，若需兼容，得回退到 RGBA 写法，例如 bg-[#00000080]（Tailwind v3.3+ 支持）或直接写内联样式 style="background-color: rgba(0,0,0,0.5)"。

遮罩层要避免的 DOM 结构陷阱

遮罩层必须是对话框的兄弟节点，不能是父容器——否则对话框会被限制在遮罩的尺寸内，且 z-index 关系容易错乱。

• ✅ 正确结构：
  （同级、独立）
• ❌ 错误结构：
  （子元素无法突破父级 z-index 限制）
• 遮罩层建议加 aria-hidden="true"，对话框加 aria-modal="true" 和 role="dialog"，保障屏幕阅读器体验

实际项目里最容易漏的是 inset-0 和 z-index 的配对校验——改了对话框的 z 值，忘了同步调高遮罩，或者滚动页面时遮罩没贴住视口顶部，八成是定位方式没用 fixed 或漏了 inset-0。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！