rgb()不支持透明度，rgba()多一个alpha参数（0–1小数）控制颜色级透明；alpha仅作用于当前颜色属性，不影响子元素，且不可用百分比或整数。
rgb() 和 rgba() 的核心区别就一条：**rgba() 多一个控制透明度的 alpha 参数，rgb() 完全不支持透明**。其他所有差异都从这点衍生。
rgba() 的第四个参数 alpha 是什么
alpha 是一个独立于颜色的透明度控制值，范围是 0（完全透明）到 1（完全不透明），支持小数如 0.3 或简写为 .3。
-
rgba(0, 0, 0, 0)渲染出来就是“看不见”，但元素仍占文档流、响应事件 -
rgba(0, 0, 0, .8)是深灰且带 20% 透底效果，背景内容会混合显示 -
alpha不影响子元素——只作用于当前声明的颜色属性（比如background-color或color），和opacity有本质区别
rgb() 和 rgba() 在浏览器中的行为差异
两者语法结构一致，但浏览器对它们的解析逻辑不同：
-
rgb(255, 0, 0)被当作纯色处理，渲染时直接覆盖底层像素 -
rgba(255, 0, 0, .5)触发“颜色混合”（compositing）：浏览器会把红色通道与下方内容做加权叠加，结果取决于父容器背景、z-index 层叠顺序等 - 旧版 IE（IE8 及更早）完全不识别
rgba()，会直接丢弃整条声明；而rgb()兼容性好得多
为什么不能用 opacity 替代 rgba() 的 alpha
因为 opacity 是作用于整个元素及其所有后代的全局透明度，而 alpha 只影响当前颜色值本身：
- 设
div { background-color: rgba(0, 0, 0, .3); color: #fff; }→ 文字保持不透明，背景半透 - 设
div { background-color: rgb(0, 0, 0); opacity: .3; }→ 整个 div（含文字、子元素、边框）都变淡，且会穿透影响 z-index 更低的兄弟元素（层叠上下文问题） -
rgba()更适合做遮罩层、按钮 hover 背景、文字描边叠加等精细控制场景
实际使用时容易忽略的关键点
很多人以为写对了格式就万事大吉，但这些细节常导致视觉偏差或兼容问题：
-
alpha值必须是0–1的小数，不能写成百分比（50%）或整数（50）——后者会被浏览器视为无效并退回到默认色 - 当父元素没有明确背景（比如
body默认透明），rgba()的“透底”可能意外露出浏览器默认白底或 iframe 边框，需主动设background-color: #fff - 在 CSS 预处理器（如 Sass）中，
rgba($color, $alpha)函数接受颜色变量，但若传入的是已带 alpha 的rgba()值，可能引发嵌套透明度叠加，结果不可控
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
