遮罩层颜色由 background-color 或 background 控制，推荐用 rgba() 或 hsla() 设置透明度，需配合 z-index 层级（如100）确保覆盖背景且不遮挡弹窗，全屏定位时注意移动端 fixed 渲染问题。
遮罩层颜色由 background-color 或 background 控制，不是靠“弹窗外”这个位置决定的
很多人以为遮罩层（overlay）的颜色要“绕开弹窗”去设置，其实它就是一个普通 div，颜色完全由自身样式决定。关键在于它的层级（z-index）必须低于弹窗、高于页面内容，否则根本看不到效果。
- 遮罩层通常用全屏
position: fixed定位，宽高设为100vw/100vh，或直接用top: 0; left: 0; width: 100%; height: 100% - 颜色推荐用带透明度的黑：
background-color: rgba(0, 0, 0, 0.5)，比纯黑更柔和，也避免遮挡弹窗文字 - 别用
background: #000这种不透明写法——用户点不到背后的弹窗，交互就卡死了
rgba() 和 hsla() 是最稳妥的遮罩配色方式
用十六进制或命名色（如 #000、black）没法控制透明度，必须靠通道函数。CSS 中只有 rgba() 和 hsla() 能在声明颜色的同时指定 alpha 值，且浏览器兼容性好（IE9+ 都支持）。
-
rgba(0, 0, 0, 0.6)：黑底 + 60% 不透明度，常用作强提示遮罩 -
hsla(210, 10%, 20%, 0.4)：偏蓝灰的暗色，适合浅色主题下的柔和遮罩 - 避免用
opacity替代 alpha——它会让整个遮罩元素（包括子内容）都变透明，而遮罩层本不该有子内容
遮罩层必须设 z-index，否则颜色再准也白搭
遮罩层颜色生效的前提是它真正在视觉上“盖住”了背景、又“让出”了弹窗。这全靠层叠上下文控制，z-index 就是开关。
- 典型层级关系：
body（默认 z=0）→ 遮罩层（z-index: 100）→ 弹窗（z-index: 101） - 如果弹窗用了
position: relative但没设z-index，它可能被遮罩层压住——因为相对定位元素的默认z-index是auto，不参与层叠比较 - 别把遮罩层
z-index设太高（比如9999），容易和第三方组件（如 toast、tooltip）冲突
移动端要注意 viewport 宽度和 fixed 的渲染差异
在 iOS Safari 或某些安卓 WebView 中，position: fixed 遮罩层可能在滚动时错位或闪烁，导致颜色区域“漏出”页面内容。这不是颜色设错了，而是布局没兜住。
立即学习“前端免费学习笔记（深入）”；
- 加
height: 100%到html和body，防止遮罩层高度塌陷 - 用
min-height: 100vh替代height: 100vh，避免 Safari 地址栏缩放导致遮罩切掉底部 - 如果遮罩层颜色在滚动后变淡或出现白边，大概率是
transform: translateZ(0)缺失——加上它可强制硬件加速，稳定渲染
