CSS如何给页面添加整页覆盖的蒙版_使用::after伪元素固定定位-css教程-PHP中文网

用::after做全屏蒙版需设position:fixed+100vw/100vh，因默认相对父元素定位；body/html直接使用易失效，应选稳定容器并设min-height:100vh和position:relative；z-index错乱需检查层叠上下文；移动端推荐用真实DOM替代伪元素。

css如何给页面添加整页覆盖的蒙版_使用::after伪元素固定定位

用 `::after` 做全屏蒙版为什么总不覆盖整个视口？

因为 ::after 默认是相对于父元素定位的，不是视口。哪怕父元素高度不够（比如只有内容高），蒙版就只能盖住那一小块——这不是你想要的“整页覆盖”。

必须让伪元素脱离文档流，并锚定到视口尺寸上：

父容器需设 position: relative（否则 absolute 会往上找，可能跑到 body 或 html 上，而它们未必撑满视口）
::after 要设 position: fixed，不是 absolute；top: 0; left: 0; width: 100vw; height: 100vh
加 z-index 确保压在内容上，但别设太高（比如 9999），避免干扰其他弹层逻辑

示例最小可用代码：

body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  z-index: 100;
}

为什么不用 `body` 或 `html` 直接做伪元素？

因为 html 和 body 在多数浏览器里默认不触发 ::after 渲染（尤其当它们没显式设 height 或 min-height 时）。更麻烦的是：如果页面内容短，body 高度就只有一屏，::after 也只盖一屏；滚动后下方就露白。

解决办法很直接：

选一个稳定、始终存在且能撑满布局的容器，比如 #app（Vue/React 根节点）、.page-wrapper，或者干脆用 body 但配合 min-height: 100vh
确保该容器有 position: relative，否则 fixed 伪元素虽能覆盖全屏，但可能被其他 transform 或 filter 容器截断（形成新的 stacking context）

`z-index` 层级错乱导致蒙版被内容穿透怎么办？

常见现象：按钮、下拉菜单、图片依然能点、能展开，像蒙版根本不存在。本质是蒙版和目标元素不在同一 stacking context，或目标元素的 z-index 更高且其父容器形成了独立层叠上下文。

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

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

下载

排查和修复要点：

检查蒙版父容器是否意外加了 transform、opacity 、will-change、filter —— 这些都会创建新 stacking context，把子元素的 z-index 锁死在内部
确认蒙版的 z-index 数值确实大于所有要遮挡的 UI 元素（比如弹窗通常用 1000，那蒙版至少得 1001）
如果用 position: fixed，蒙版天然脱离普通文档流，但若父容器有 transform，它仍会被“框住”——此时应把伪元素挂到更外层（如直接挂 body，并补 min-height: 100vh）