rgb()不支持透明度，必须用rgba()；rgba()第四个参数为0–1的alpha值，如rgba(255,0,0,0.5)；替代方案有hsla()和#rrggbbaa（现代浏览器）；勿与opacity混用。
rgb() 函数本身不支持透明度，必须用 rgba()
直接写 rgb(255, 0, 0, 0.5) 是无效的——rgb() 只接受三个参数（红、绿、蓝），第四个值会被浏览器忽略，颜色始终为不透明。想控制透明度，必须改用 rgba() 函数。
rgba() 的第四个参数是 alpha 值，范围是 0–1
这个值不是百分比，也不是 0–255，写成 rgba(255, 0, 0, 50%) 或 rgba(255, 0, 0, 128) 都会失效。正确写法只有两种：
-
rgba(255, 0, 0, 0.5)—— 半透红 -
rgba(255, 0, 0, 0)—— 完全透明（看不见） -
rgba(255, 0, 0, 1)—— 完全不透明（等价于rgb(255, 0, 0)）
替代方案：hsla() 或 16 进制 + alpha（CSS Color Module Level 4）
如果项目需兼容老浏览器（如 IE8 及更早），rgba() 不被支持，可考虑：
- 用
hsla()：语法一致，hsla(0, 100%, 50%, 0.5) - 现代浏览器支持 8 位 16 进制写法：
#ff000080（后两位80表示 alpha，00为全透明，ff为不透明） - 注意：
#rrggbbaa写法在 Safari 15.4+、Chrome 102+、Firefox 99+ 才稳定支持，旧版本会直接忽略整条声明
常见错误：和 opacity 混用导致意外继承
rgba() 只影响当前颜色本身的透明度；而 opacity 会让整个元素（含子元素、边框、阴影）一起变淡。例如：
立即学习“前端免费学习笔记（深入）”；
button {
background-color: rgba(0, 128, 255, 0.3);
color: white;
}
/* ✅ 文字保持不透明，背景半透 */
<p>button {
background-color: rgb(0, 128, 255);
opacity: 0.3;
}
/<em> ❌ 文字、边框、内边距区域全部变淡，通常不是你想要的 </em>/alpha 值写错小数点、漏掉括号、或误把十六进制 alpha 当成十进制，是最容易被忽略又最难排查的问题。调试时建议先用 1 和 0 测试是否生效，再逐步调整中间值。
