不能直接给<input type="file">设半透明遮罩，因其是替换元素，opacity或background无效；正确做法是用position:fixed的独立div覆盖视口，设rgba背景、高z-index、禁滚动，并确保尺寸和层叠上下文正确。
直接把 <input type="file"> 元素设成半透明遮罩是行不通的——它本身不能当遮罩层用，也不能靠 opacity 或 background-color 实现覆盖效果。真正要做的，是在文件上传触发前/上传中，叠加一层独立的、可控制的半透明遮罩层。
为什么不能直接改 input[type="file"] 的 opacity
给 <input type="file"> 加 opacity: 0.5 只会让那个按钮变淡，既不覆盖页面，也不阻止用户操作，更不会提示“上传中”。它只是个表单控件，不是容器，没法承载遮罩逻辑。常见错误还包括试图给它加 background: rgba()，但 <input> 是替换元素，背景色默认不渲染在可见区域。
上传中显示半透明遮罩的正确结构
遮罩必须是独立 <div>，用 position: fixed 覆盖整个视口，并通过 JS 控制显隐。关键点：
- 遮罩层需设
top: 0; left: 0; width: 100vw; height: 100vh;，避免因内容为空而塌陷 - 用
background-color: rgba(0, 0, 0, 0.6)实现半透明，别用opacity，否则会连带内部 loading 图一起变淡 -
z-index必须高于页面所有可交互元素（建议 ≥ 999） - 遮罩层默认
display: none，JS 在input触发change或提交前设为block或flex
防止点击穿透和滚动干扰
遮罩层不仅要挡住视觉，还要阻断底层交互：
立即学习“前端免费学习笔记（深入）”；
- 确保遮罩层有
pointer-events: auto（默认值），才能拦截鼠标事件；设none就等于没盖 - 上传中禁止页面滚动：在显示遮罩时加
document.body.style.overflow = 'hidden'，隐藏时恢复 - 如果遮罩内含 loading 动画或文字，它们的
z-index应比遮罩层更高（如z-index: 1001） - 旧版 Safari 或安卓 WebView 中，加
transform: translateZ(0)到遮罩层可防闪烁
兼容 <dialog> 的现代写法（仅限上传状态提示）
如果你只在上传完成/失败后弹提示，而非上传过程中遮罩，<dialog> 的 ::backdrop 是更语义化的选择：
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.6);
}
但注意：<dialog> 不适用于“上传进行中”的持续遮罩——它的 ::backdrop 只在 showModal() 调用时存在，且无法自定义内部 loading 状态。真正在传文件时，还是得回到 fixed div 方案。
最易被忽略的是遮罩层的尺寸声明和 overflow 处理：没写 width/height，或父容器意外创建了层叠上下文（比如加了 transform 或 opacity: 0.99），都会导致遮罩“看不见却存在”，调试时得盯着 computed 样式看 offsetHeight 和层叠上下文链。
