推荐用 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);
}
