应使用rgba()或hsla()设置背景透明度，而非opacity属性；因opacity会使整个元素（含文字、子元素）统一变透明且不可逆，而rgba()仅作用于背景色，可确保文字保持100%不透明。
opacity 属性会让文字和背景一起变透明
直接给元素设置 opacity，比如 opacity: 0.5，整个元素（包括文字、子元素、边框、背景色）都会按比例变透明。这不是“只让背景透明”，而是整块渲染内容的 alpha 通道统一降低。所以文字也会发虚、看不清——这不是 bug，是规范行为。
想只让背景透明而文字保持不透明？用 rgba() 或 hsla()
背景色用带 alpha 的颜色值，而不是靠 opacity。这样文字、边框、子元素完全不受影响。
-
background-color: rgba(0, 0, 0, 0.3)—— 黑色背景，30% 不透明度，文字仍是 100% 不透明 -
background-color: hsla(200, 50%, 60%, 0.4)—— 同理，HSL 模式下也可控透明度 - 注意：
rgba()只作用于当前属性（如background-color或color），不会传染给子元素
filter: opacity() 和 opacity 的区别在哪
filter: opacity(0.5) 表面看效果和 opacity: 0.5 一样，但它是图形处理层的滤镜，会触发硬件加速，也可能导致子元素模糊、z-index 异常或 transform 冲突。更关键的是：它同样会让文字变透明，且无法单独剥离文字。
- 不要用
filter: opacity()替代rgba()来保文字清晰 - 在需要动画且兼容性允许时，
opacity本身性能更好；filter更适合叠加其他效果（如 blur + opacity） - 某些旧版 Safari 对
filter: opacity()渲染有偏色问题
遇到文字意外变透明？先检查父级 opacity
这是最常被忽略的坑：子元素没有设 opacity，但看起来半透明——大概率是某个祖先元素（哪怕隔了三层）设置了 opacity: 0.8。CSS 的 opacity 是继承不可逆的，子元素无法通过设 opacity: 1 恢复“全不透明”状态。
立即学习“前端免费学习笔记（深入）”；
div.container {
opacity: 0.7;
}
div.container p {
/* 这里写 opacity: 1 也没用 */
color: black;
}解决办法只有两个：换用 rgba() 控制背景，或者重构 DOM，让文字和需透明的背景分属不同、无祖孙关系的兄弟节点。
