rgba() 完全支持 color 属性，a 值应使用 0–1 小数（如 0.5），而非百分比；常见无效原因包括祖先 opacity 干扰、背景同色、rgba(0,0,0,0) 完全透明或 CSS 优先级覆盖。
rgba() 不能直接用于 color 属性的 alpha 通道？
可以，但必须注意：CSS 的 color 属性完全支持 rgba() 函数，只要浏览器不是 IE8 及更早版本（已基本淘汰）。常见误解是“文字不透明”——其实是写法或叠加导致视觉上没生效。
正确写法：用 rgba() 替代 hex 或 rgb 写 color
直接把 color 值换成 rgba(r, g, b, a) 即可，a 是 0–1 的小数，不是百分比。比如半透明白字：
color: rgba(255, 255, 255, 0.5);
等价于：
color: rgba(255, 255, 255, 50%); /* 注意：CSS Color Module Level 4 支持百分比写法，但部分旧浏览器（如 Safari 15.6 之前）不认 */推荐始终用小数形式，兼容性更稳。
立即学习“前端免费学习笔记（深入）”；
为什么写了 rgba() 还看不出半透明？
常见原因有这几个：
- 父容器或祖先元素设置了
opacity，它会强制把整个元素（含文字、背景、子元素）一起变透明，干扰你对color: rgba()的判断 - 文字下面有同色块背景（比如白色文字+白色背景），alpha 再低也看不出变化
- 用了
rgba(0,0,0,0)—— 这是完全透明，文字“消失”，不是“半透明” - CSS 优先级被其他规则覆盖，比如后面又写了
color: #000，把 rgba 覆盖掉了
和 opacity 对比：什么时候该用哪个？
rgba() 只影响颜色本身，不影响布局、子元素或边框；opacity 是作用于整个元素盒模型的透明度开关。举个例子：
.text-box {
background-color: rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.7);
border: 1px solid rgba(0, 0, 0, 0.3);
}这样背景、文字、边框各自控制透明度；而如果写 opacity: 0.7，三者会一起变淡，且子元素也会继承变淡，不可逆。
真正要控制“仅文字半透明”，就只动 color，别碰 opacity。
实际项目里最容易漏掉的是检查祖先元素有没有悄悄加了 opacity，一加全糊，debug 时得一层层看 computed styles。
