最可靠方案是用background-color: rgba(0, 0, 0, 0.4)实现背景半透明，文字和子元素保持完全不透明；须避免opacity，因其会连带子元素变暗失效，且rgba的alpha值必须为0–1小数，不可写50%或50。
直接用 rgba() 设置 background-color
这是最简单也最可靠的方案：只让背景变半透，文字、边框、子元素完全不受影响。关键不是“怎么调透明”，而是避免误用 opacity——它会把整个元素连同文字一起压暗。
-
rgba(0, 0, 0, 0.4)表示黑色背景，60% 透明（alpha = 0.4即 40% 不透明） - 第四个参数是小数（0–1），不是百分比；写成
0.5就是 50% 不透明，别写50%或50 - 必须单独声明
background-color，不能靠background: #000这类简写覆盖——后者会清掉 alpha 值 - DevTools 中如果看到
background-color被划掉（strike-through），说明被前面的background复合属性重置了
背景图上加半透明遮罩怎么办
rgba() 对纯色有效，但对 url() 背景图无效。想让图片“变暗”同时文字清晰，得用伪元素分层控制。
- 父容器加
position: relative - 用
::before伪元素承载图片：content: ""+position: absolute+top: 0; left: 0; width: 100%; height: 100% - 伪元素设
z-index: -1，确保文字在上层 - 给伪元素加
opacity: 0.3（或filter: opacity(0.3)，但后者有性能风险） - 如果父容器有
border-radius，伪元素也要同步设置，否则边缘漏底
IE8 兼容时怎么 fallback
IE8 及更早版本不支持 rgba()，但不会报错，而是直接忽略该行声明。利用 CSS 级联特性可安全降级。
- 先写一句 IE8 能识别的纯色：
background-color: #000 - 再写一句现代浏览器用的：
background-color: rgba(0, 0, 0, 0.6) - IE8 会跳过第二行，显示纯黑；其他浏览器用第二行，文字始终清晰
- 不要用
filter: progid:DXImageTransform.Microsoft.gradient(...)模拟，它会触发 hasLayout，容易破坏盒模型
为什么 opacity 一定不能用在容器上
这不是兼容性问题，而是渲染机制决定的：浏览器会为设置了 opacity 的元素创建独立合成层，把整个 DOM 子树当作一个整体来处理透明度。
立即学习“前端免费学习笔记（深入）”；
- 哪怕你给子元素显式写
opacity: 1，它依然会被父级的opacity: 0.5“压暗” - 文字模糊、按钮点击区域变小、甚至导致某些动画卡顿，都是这个机制的副作用
- 真正要控制的从来不是“背景透一点”，而是“别让文字跟着糊”——记住这点，基本就不会踩坑
