应使用 rgba() 设置背景色透明度，而非 opacity；rgba() 的第四个参数为0–1小数，如 rgba(0,0,0,0.5)；避免用 background 缩写覆盖 background-color 或父级 opacity 影响子元素。
用 rgba() 设置背景色，而不是用 opacity
直接改 opacity 会让整个元素（包括文字、子元素）一起变透明，这不是你想要的。真正要的是「只让背景透，文字保持不透明」，唯一可靠的方式是给 background-color 单独设带 alpha 通道的颜色，比如 rgba(0, 0, 0, 0.5)。
rgba() 的四个参数含义和常见误写
rgba() 是红、绿、蓝、透明度四元组，第四个参数是 0–1 的小数（不是百分比），写成 0.6 对应 60%，写成 60 或 60% 都无效，浏览器会直接忽略整条声明。
-
rgba(255, 255, 255, 1)→ 白色，完全不透明 -
rgba(0, 0, 0, 0.7)→ 黑色，70% 不透明（即 30% 透明） -
rgba(100, 150, 200, 0.2)→ 带透明度的蓝调色，文字不受影响
兼容性与现代替代方案：hsla() 和 color-mix()
rgba() 在所有现代浏览器中都支持，IE9+ 也 OK。如果想用 HSL 色彩模型控制背景透明度，可用 hsla()，逻辑一致：
background-color: hsla(200, 50%, 60%, 0.4);
Chrome 111+ 和 Safari 16.4+ 支持更灵活的 color-mix()，比如把背景色和透明层混合：
立即学习“前端免费学习笔记（深入）”；
background-color: color-mix(in srgb, #333 70%, transparent);
但目前它不能替代 rgba() 的通用性，尤其在需要精确 alpha 值或兼容旧环境时，rgba() 仍是首选。
别踩坑：伪元素遮罩、background 缩写、继承干扰
有人试图用伪元素 + opacity 模拟透明背景，代码冗余且容易被 z-index 或 pointer-events 搞乱；还有人写 background: rgba(...) no-repeat;，结果发现透明度失效——因为 background 是复合属性，会覆盖掉前面单独写的 background-color，必须确保最终生效的是 background-color。
- 避免用
background缩写覆盖background-color - 不要给父容器设
opacity，否则子文字必然跟着变淡 - 如果背景是渐变或图片，用
background: linear-gradient(rgba(...), rgba(...)), url(...);分层叠加
透明度这件事，核心就一条：颜色本身的 alpha 值可控，而元素级的 opacity 不可控——后者是全局开关，前者才是精准手术刀。
