如何用CSS rgba颜色创建半透明遮罩层？

本文共计587个文字，预计阅读时间需要3分钟。

直接使用以下代码即可实现半透明黑色遮罩，但必须确保父容器有内容、子元素定位正确，否则遮罩可能看不见或罩不住：

遮罩层不显示的常见原因

最常踩的坑不是颜色写错，而是层级和尺寸问题：

• position: absolute 的遮罩层没配 top/left/right/bottom: 0，导致它只占内容宽高，而不是铺满父容器
• 父容器没设 position: relative，导致 absolute 遮罩层相对整个页面定位，偏出可视区
• 遮罩层 z-index 比被遮盖的内容还低，被盖在下面了
• 父容器高度为 0（比如只有浮动子元素没清除），遮罩层无处可铺

兼容性与替代方案：IE8 及更老浏览器不支持 rgba

如果必须兼容 IE8，不能用 rgba()，得换方案：

• 用半透明 PNG 图片作背景：background: url("mask.png")
• 用 IE 滤镜（仅 IE6–IE9）：filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000,endColorstr=#80000000)，其中 #80000000 是 ARGB（80 是 alpha 十六进制，对应约 50% 透明）
• 现代项目基本可忽略 IE8，优先写 rgba，再加一行 background-color: #000 作降级（纯黑，非半透）

遮罩层 + 内容居中的一体化写法

实际常用遮罩配合弹窗或提示文字，推荐这样组织结构：

立即学习“前端免费学习笔记（深入）”；

.overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; } .overlay .content { background: white; padding: 20px; border-radius: 4px; /* 不需要额外定位 */ }

注意：用 fixed 可覆盖全屏（含滚动区域），若只需盖住某个模块，把 fixed 换成 absolute，并确保父容器有 position: relative。alpha 值别低于 0.3，否则遮罩太淡失去作用；也别高于 0.8，否则内容完全不可见。