index.html中怎么添加全屏遮罩层？-html教程-PHP中文网

全屏遮罩必须用 position: fixed 并设置 top/right/bottom/left 为 0，显式声明 pointer-events: auto，子元素用 flex 或 transform 居中，慎用 user-scalable=no。

index.html中怎么添加全屏遮罩层？

全屏遮罩必须覆盖整个视口，哪怕页面滚动也要始终填满屏幕。用 position: absolute 会相对于最近的定位祖先，一旦父容器有 overflow: hidden 或高度限制，遮罩就可能被截断或无法撑满。只有 position: fixed 才能真正锚定视口。

实操建议：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

遮罩层元素直接放在最外层，不要嵌套在内容容器里
必须设置 top: 0; right: 0; bottom: 0; left: 0;，不能只靠 width: 100%; height: 100%; —— 后者在某些浏览器（如 Safari）下对 fixed 元素不保证填满视口
加 z-index 确保层级高于所有内容，比如 z-index: 9999

常见错误是只设 background-color: rgba(0,0,0,0.5)，却忘了默认情况下 pointer-events 是 auto，导致点击会透传到下层元素，遮罩形同虚设。

实操建议：

如果遮罩里要放弹窗、加载图标或提示文字，直接用 margin: auto 或 text-align: center 很难精准居中，尤其在动态尺寸下。

实操建议：

给遮罩层内的子容器（比如 <div class="modal">）加 <code>position: absolute; + top: 50%; left: 50%; transform: translate(-50%, -50%);
或者更现代的方式：用 display: flex; + justify-content: center; + align-items: center; 在遮罩层上生效（注意父级需设 height: 100vh 或上述四边定位）
别忘了给子容器设 z-index，确保它比遮罩背景高，否则文字/按钮会被盖住

在 iOS Safari 上，如果遮罩层内容触发了缩放（比如双指张开），或者页面设置了 user-scalable=no，可能导致遮罩错位、留白或无法响应触摸事件。

实操建议：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 中慎用 user-scalable=no，它会让遮罩内输入框无法唤起键盘（iOS 会禁用缩放导致焦点异常）
遮罩层本身加 -webkit-tap-highlight-color: transparent; 消除点击高亮干扰
测试真机时重点看 Safari —— 它对 fixed 元素在地址栏收起/展开时的重绘最敏感，有时需监听 resize 或 scroll 手动重设高度

pointer-events