rgba()通过第四个alpha参数控制白色透明度，取值0（全透明）到1（不透明），实现白色与背景融合；常用于半透遮罩、柔和按钮背景等场景，且不影响子元素透明度。
可以，白色本身是不透明的颜色，但通过 rgba() 函数能给白色添加透明度，实现“带透明度的白色”效果。
rgba 是怎么让白色变透明的？
rgba() 是 CSS 中定义颜色的函数，格式为 rgba(红, 绿, 蓝, 透明度)。白色对应 RGB 值是 (255, 255, 255)，第四个参数 alpha 值 控制透明度，取值范围是 0（完全透明） 到 1（完全不透明）。
-
rgba(255, 255, 255, 1)→ 纯白、不透明 -
rgba(255, 255, 255, 0.8)→ 白色、20% 透明（即 80% 不透明） -
rgba(255, 255, 255, 0.3)→ 白色、70% 透明，背景会明显透出 -
rgba(255, 255, 255, 0)→ 完全透明（看起来像“消失”，实际是纯透明的白色）
常用场景：什么时候用带透明度的白色？
不是为了“让白色变隐形”，而是为了让白色元素与背景柔和融合，提升视觉层次：
- 半透明白色遮罩层（比如图片上盖一层
rgba(255,255,255,0.6)的 div，让文字更易读） - 按钮或卡片的背景色，避免纯白在亮背景下显得“刺眼”或“割裂”
- 悬浮态（
:hover）中微调白色背景的明暗感，增强交互反馈 - 配合深色背景时，用
rgba(255,255,255,0.9)比纯白更舒适，减少眩光
注意：别和 opacity 混用
rgba() 只影响颜色本身的透明度，不影响子元素；而 opacity 会让整个元素及其所有内容（文字、子盒子、边框等）一起变透明。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐：给背景设
background-color: rgba(255,255,255,0.7)，文字保持 100% 清晰 - ❌ 少用：设
opacity: 0.7，会导致里面文字也发虚，可读性下降
小技巧：快速换算 hex 白 → rgba
纯白的十六进制是 #ffffff，想转成透明度 0.5 的白色？直接记口诀：
最后两位十六进制 = alpha × 255 取整 → 转为 2 位 hex
- 0.5 × 255 ≈ 128 → 十六进制是
80→rgba(255,255,255,0.5)≈#ffffff80（CSS 支持 8 位 hex，但兼容性略低于 rgba） - 更稳妥写法仍是
rgba(255,255,255,0.5)，通用性好，语义清晰
