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。