推荐用 rgba() 或 hsla() 为独立遮罩层设透明背景，避免用 opacity 或八位十六进制；rgba(0,0,0,0.6) 表示黑色半透遮罩，hsla 更适配主题切换，内容层须保持完全不透明。
模态框背景透明，不是靠“透明颜色代码”这种模糊概念，而是明确使用 rgba() 或 hsla() 设置带 alpha 通道的背景色，或用 opacity（但会连内容一起变透明，通常不推荐）。
用 rgba() 给模态框遮罩层设半透背景
最常用、最可控的方式。遮罩层（overlay）是独立于模态框内容的全屏
，它的背景用 为什么不用
需要深色/浅色自适应遮罩？用
rgba(0, 0, 0, 0.5) 表示黑色、50% 不透明度（即 50% 透明）。
-
rgba(r, g, b, a)中的a是 0～1 的小数，0完全透明，1完全不透明 - 不要写成
#00000080这类八位十六进制——虽然现代浏览器支持，但 IE 完全不认，兼容性风险高 - 避免对整个模态框容器（含标题、按钮）设
rgba背景，否则文字边缘可能发虚；应只作用于遮罩层
/* 推荐：单独的遮罩层 */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); /* 黑色，60% 不透明 */ z-index: 1040; } 为什么不用 opacity？
opacity 会让整个元素及其所有子元素（包括里面的按钮、文字）按相同比例变透明，导致内容难以辨认，且无法单独控制遮罩与内容的透明度关系。
- 即使只给遮罩层加
opacity: 0.6，它和rgba(0,0,0,0.6)视觉效果一致，但语义更弱、调试更难 - 若误加在模态框主体上（如
.modal-content），用户会看不清表单控件，交互体验直接下降 -
opacity还会触发新层叠上下文，可能干扰z-index布局逻辑
需要深色/浅色自适应遮罩？用 hsla() 更灵活
当模态框需适配暗黑模式或主题切换时，hsla() 比 rgba() 更易维护——只需改色调（h）和亮度（l），透明度（a）保持独立。
立即学习“前端免费学习笔记（深入）”；
-
hsla(210, 10%, 20%, 0.7)是深灰带 70% 不透明，适合暗色背景下的遮罩 -
hsla(0, 0%, 95%, 0.8)是极浅灰带 80% 不透明，适合亮色界面中弱化干扰 - 比起反复调
rgb值，hsla调明暗更符合直觉，也方便 css 变量注入
.modal-overlay.dark-theme { background-color: hsla(210, 10%, 20%, 0.7); } .modal-overlay.light-theme { background-color: hsla(0, 0%, 95%, 0.8); }真正关键的是分清「遮罩层」和「内容层」——透明只该发生在遮罩上，内容必须保持完全不透明。很多人调了半天发现文字也变淡了，八成是把样式错加到了包裹整个弹窗的外层容器上。