应使用 rgba() 或 hsla() 设置背景透明度，而非 opacity；前者仅影响背景色，后者使整个元素及子元素变透明，导致内容发灰。
背景色叠加后发灰，通常是因为用了 opacity 降低父容器透明度，导致子元素（包括文字、图标等）也一起变透明，视觉上颜色“被冲淡”，显得灰蒙蒙。真正想实现的是“仅背景半透，内容清晰”，这时应改用 rgba() 或 hsla() 直接设置背景色的透明通道，而非给整个元素加 opacity。
用 rgba() 替代 opacity 控制背景透明度
rgba(r, g, b, a) 中的 a（alpha）值只作用于颜色本身，不影响子元素。比如：
- ❌ 错误写法（整块变灰）：
.box { background: #007bff; opacity: 0.8; } → 文字和边框也变 80% 透明 - ✅ 正确写法（仅背景半透）：
.box { background: rgba(0, 123, 255, 0.8); } → 背景带透明度，文字依然 100% 清晰
注意颜色叠加的真实效果
即使用了 rgba()，如果多层背景（如伪元素 + 真实背景）或父级已有底色，仍可能产生视觉上的“灰感”。常见原因有：
- 父容器本身有非白色背景，而子元素
rgba()背景与之混合（例如深色父层 + 半透浅蓝背景 → 显灰蓝） - 多个
rgba()层叠（如::before和background同时设半透色），透明通道会叠加，降低整体饱和度 - 在暗色模式下未适配，
rgba(255,255,255,0.1)在黑底上是灰白，不是纯白
更稳妥的替代方案
除了 rgba()，还可考虑：
立即学习“前端免费学习笔记（深入）”；
-
使用
background-color: hsla(...)：对设计师更直观，能单独调alpha且保持色相/饱和度稳定 - 用半透黑色/白色遮罩层（绝对定位伪元素）：精准控制层级，避免影响主内容样式
-
检查是否意外继承了父级透明度：某些 UI 框架或重置样式会全局设
* { opacity: ... }，需排查
调试小技巧
快速验证是不是透明度惹的祸：
- 临时把
opacity改成1，看是否立刻“不灰”了 - 用浏览器开发者工具逐层关闭背景相关声明，观察颜色变化源头
- 复制当前计算出的
rgba值到取色器，看 alpha 是否过低（
