用 position: fixed + rgba() 可实现纯 CSS 灰色遮罩广告，关键需确保 z-index 层级合理（遮罩 9998、弹窗 9999）、遮罩与弹窗 DOM 同级且弹窗后置、移动端补充 touchstart 防延迟，并避免 opacity/filter 等影响交互与兼容性的属性。
直接用 position: fixed + rgba() 背景就能做出灰色遮罩广告，不需要 JS 控制显隐，也不依赖新 CSS 属性；但必须注意 z-index 层级、点击穿透和移动端适配这三处最容易翻车的地方。
用 fixed 定位实现全屏灰色遮罩
这是最直白也最可控的方式：新建一个 <div class="ad-overlay"></div>，不塞内容，只做背景层。关键不是“怎么画灰”，而是“怎么盖得稳”：
-
.ad-overlay必须设position: fixed，且top: 0; left: 0; width: 100vw; height: 100vh—— 用vw/vh而非%，避免父容器overflow: hidden或缩放导致遮罩漏边 - 背景用
background-color: rgba(0, 0, 0, 0.65)，alpha 值建议在0.6–0.75之间：太浅压不住内容，太深影响广告文案可读性 - 必须设
z-index: 9998（或更高），确保它盖在页面主体上、但低于广告弹窗本身（广告弹窗建议设z-index: 9999） - 别加
opacity，它会把内部所有子元素一起变淡；要调透明度，只动rgba()的第四个参数
让广告弹窗居中且不被遮罩吞掉
遮罩只是背景，真正广告内容得单独一层，否则文字按钮全被压暗。常见错误是把广告 HTML 塞进遮罩 div 里，结果发现点不了按钮——因为伪元素或透明背景不支持交互。
- 广告弹窗（比如
<div class="ad-popup">）必须和遮罩同级，且放在遮罩之后（DOM 顺序决定默认堆叠） - 弹窗自身用
position: fixed+transform: translate(-50%, -50%)居中，不要只靠margin: -x，否则响应式下容易偏移 - 如果弹窗里有关闭按钮或跳转链接，给它加
pointer-events: auto；遮罩层保持pointer-events: auto（默认），才能响应点击关闭逻辑 - 禁止给弹窗设
opacity或filter: blur()，这些会干扰可访问性，屏幕阅读器可能跳过
点击遮罩关闭广告的 JS 细节
用户点灰背景关广告是基本预期，但直接绑定 click 到遮罩上会出问题：点弹窗区域也会触发关闭（事件冒泡）。必须隔离点击范围。
立即学习“前端免费学习笔记（深入）”；
- 监听遮罩的
click事件时，检查e.target === e.currentTarget，确保只响应“纯背景点击”，不包括弹窗内部 - 给弹窗加
click事件并调e.stopPropagation()，这是防冒泡最稳妥的做法，比只靠 CSSpointer-events: none更可靠 - 移动端需额外处理：加
touchstart事件监听，iOS Safari 对click有 300ms 延迟，用户会觉得“点了没反应” - 别用
display: none隐藏遮罩，改用visibility: hidden+opacity: 0配合transition，否则动画会闪一下
兼容性和性能避坑点
灰色遮罩看着简单，但在老浏览器或低端安卓机上，几个小设置就可能让整个广告失效或卡顿。
-
100vh在 iOS Safari 中可能计算错误（地址栏收起/展开导致视口高度突变），稳妥做法是用min-height: 100vh+height: auto，再加 JS 监听resize动态重设 - 避免在遮罩上用
backdrop-filter: blur()，它在很多安卓 WebView 和旧版 Chrome 中渲染异常，甚至白屏 - 遮罩 DOM 节点尽量精简，不要在里面塞图片、字体图标或复杂 SVG —— 它只该是一层色块
- 如果广告需支持 SSR（服务端渲染），初始状态必须设
style="display: none"，否则首屏会闪一下灰背景
真正难的不是画出那层灰，而是让它在各种设备、各种网络条件下都“稳稳地盖住、清清楚楚地露出广告、安安静静地被点掉”。z-index 写错一行、pointer-events 漏一个、vh 在 iOS 上少个 min-，都可能让广告变成不可点、不可关、不可读的废片。
