opacity 会让背景越来越暗是因为它作用于整个元素及子节点，导致颜色、文字、边框等全部变淡，且多层叠加时透明度相乘（如0.5×0.5=0.25），使重叠区域明显发灰发暗；应改用 rgba() 仅控制背景色透明度，避免影响子元素。
opacity 为什么会让背景越来越暗
因为 opacity 是作用于整个元素及其所有子节点的透明度，它会把颜色、文字、边框、子元素全部按比例“变淡”，而且如果多个带 opacity 的层叠在一起，透明度还会叠加。比如两个 opacity: 0.5 的 div 叠在一起，重叠区域实际是 0.25 的不透明度，颜色就明显发灰发暗。
常见错误现象：
— 按钮加了 opacity: 0.7 后，里面的文字也变模糊了
— 半透明遮罩层盖在图片上，结果图片细节被“洗掉”
— 多层弹窗嵌套时，底层内容几乎看不见
用 rgba() 替代 opacity 实现局部透明
只让背景色透明，不影响文字、边框、子元素——这是最直接的解法。关键就是把 background-color 从十六进制或 rgb() 改成 rgba()，第四位 alpha 值控制不透明度。
实操建议：
— background-color: #000000 → background-color: rgba(0, 0, 0, 0.7)
— background-color: rgb(30, 30, 30) → background-color: rgba(30, 30, 30, 0.7)
— 不要混用：避免 background-color: rgba(...); opacity: 0.8，两者同时存在会再次叠加
立即学习“前端免费学习笔记（深入）”；
rgba() 的兼容性与 fallback 处理
现代浏览器全支持 rgba()，但 IE8 及更早版本不支持。如果项目仍需兼容 IE8，得加一层降级：
实操建议：
— 先写 IE 友好的 background-color: #000
— 再写 background-color: rgba(0, 0, 0, 0.7)，后声明会覆盖前一条（IE8 忽略）
— 不要用 Filter: progid:DXImageTransform.microsoft.gradient 模拟，容易引发 z-index 和点击穿透问题
— 如果用 Postcss 或构建工具，可配 autoprefixer 自动补兼容写法
border、shadow、文字要不要也改 rgba？
不一定。只有你明确想让它们“局部透明”时才需要改。比如半透边框常用 border-color: rgba(0, 0, 0, 0.2)，而文字一般保持完全不透明更易读。
容易踩的坑：
— 把 color: rgba(0, 0, 0, 0.7) 用在正文文字上，导致可访问性（WCAG 对比度）不达标
— 给 box-shadow 写 rgba(0,0,0,0.15) 是对的，但误写成 shadow-color: ...（CSS 无此属性）
— 使用 CSS 变量时，别写 --bg: rgba(var(--r), var(--g), var(--b), 0.7)，IE 不支持函数式变量引用，应提前算好值
事情说清了就结束