rgba()用于background-color时背景半透明、文字不透明；用于color时文字半透明。避免误用opacity导致整体变透明，必要时为父容器设纯色背景以便观察效果。
用 rgba() 设置背景色时，如果只看到文字变透明了，说明你可能把 rgba() 误用在了文字颜色（color）上，而不是背景色（background-color）。
确认 rgba 是用在 background-color 上
rgba(r, g, b, a) 中的 a（alpha）控制的是**该颜色自身的不透明度**。它只影响你把它赋给哪个属性：
- 写在
color: rgba(0,0,0,0.5);→ 文字半透明 - 写在
background-color: rgba(255,255,255,0.5);→ 背景半透明，文字保持原样
避免父元素透出干扰效果
即使背景设对了，如果父容器本身有背景色或图片，而子元素用了半透背景，看起来可能像“整体发虚”。这时要检查：
- 父级是否意外设置了
opacity（它会让整个元素含子元素一起变透明） - 确保只改
background-color，不要碰opacity或color - 必要时给父容器加纯色背景，便于观察子元素背景透明是否生效
替代方案：用 backdrop-Filter 搭配半透背景（进阶）
如果想实现「背景模糊+半透」的毛玻璃效果，可以组合使用：
立即学习“前端免费学习笔记（深入）”；
background-color: rgba(255, 255, 255, 0.7);backdrop-filter: blur(8px);
注意：此特性在 safari 和新版 chrome/edge 支持良好，但旧版浏览器需加 -webkit-backdrop-filter 前缀，且不支持 IE。
基本上就这些。关键就是——rgba 给谁，谁透明。想背景透，就塞给 background-color；想文字透，才给 color。