rgba()是唯一支持透明度的颜色函数，alpha值必须为0–1小数（如0.5），rgb()无透明参数；rgba仅作用于颜色属性（如background-color、color），不适用于opacity等非颜色属性，且不会影响子元素透明度。
rgb() 本身就没有透明度参数，写再多也无效。
它只接受三个参数：rgb(r, g, b)，分别对应红、绿、蓝通道的数值（0–255 或 0%–100%）。想加透明度，必须换用 rgba()。
rgba() 的 alpha 参数必须是 0–1 的小数
浏览器严格按 CSS 规范校验第四个参数：
- ✅
rgba(0, 0, 0, 0.5)—— 正确，50% 透明 - ❌
rgba(0, 0, 0, 50%)—— 无效，整条声明被丢弃（DevTools 里会划掉） - ❌
rgba(0, 0, 0, 50)—— 无效，alpha 超出范围，同样被忽略
从设计稿看到「30% 透明」，别直接填 30%，要换算成 0.3。
rgba() 只对颜色属性生效，不能乱塞
它只适用于明确接受颜色值的 CSS 属性：
- ✅
background-color: rgba(255, 0, 0, 0.7) - ✅
color: rgba(255, 255, 255, 0.9) - ✅
border-color: rgba(0, 0, 0, 0.2)
但以下写法完全错误：
- ❌
opacity: rgba(0, 0, 0, 0.5)——opacity只认数字，不认颜色函数 - ❌
filter: opacity(rgba(0,0,0,0.5))——filter: opacity()也只接受 0–1 数字
写了也不会报错，但浏览器直接跳过该行样式。
rgba() 背景透明 ≠ 元素整体透明
这是最常混淆的点：
-
background-color: rgba(0, 0, 0, 0.3)→ 只让背景变半透，文字、子元素照常清晰 -
opacity: 0.3→ 整个元素（含文字、边框、阴影）一起发虚
如果 hover 时背景淡入却连按钮文字也变淡，大概率是误用了 opacity，而不是 background-color 没生效。
真正容易被忽略的是：过渡动画必须用同类型颜色值。比如从 background-color: rgba(255, 255, 255, 0.1) 到 rgba(255, 255, 255, 0.8) 才能平滑变化；混用 rgb() 和 rgba() 会导致跳变或闪烁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
