应优先使用rgba()而非#rrggbbaa，因后者仅chrome 65+/firefox 49+/edge 79+/safari 12.1+支持，ie及旧safari直接失效；rgba()需用0–1小数作alpha值，且fallback色必须前置声明以保障兼容性。
直接用 rgba()，别碰 #RRGGBBAA，除非你明确知道目标环境全是 Chrome 65+/Firefox 49+/Edge 79+/Safari 12.1+ 且完全不兼容 IE 和旧 Safari。
rgba() 的 alpha 参数必须是 0–1 的小数
常见错误是写成 rgba(0,0,0,50) 或 rgba(0,0,0,50%)——这两种写法浏览器直接当无效声明丢弃，回退为不透明黑（rgb(0,0,0)）。alpha 只认小数：0 表示全透，1 表示不透，0.7、0.25、0.875 都合法。
使用场景：需要背景半透但文字保持清晰时，rgba() 是唯一靠谱选择。它只改背景色本身，不影响子元素。
- 十六进制转
rgba()要先解码：比如#3498db→ 拆成34、98、db→parseInt('34', 16)得到 52、152、219 → 最终写成rgba(52, 152, 219, 0.8) - 浅色背景（如
#f8f9fa）配高 alpha（如 0.9）可能看不出效果，建议从 0.7 开始往下调 -
opacity: 0.5和background-color: rgba(0,0,0,0.5)效果完全不同：opacity会让整个元素及其所有子节点一起变淡；rgba()只动背景
#RRGGBBAA 八位十六进制在老浏览器里直接失效
#RRGGBBAA 是 CSS Color Module Level 4 标准，Chrome 65+、Firefox 49+、Edge 79+、Safari 12.1+ 支持稳定；IE 完全不识别，Safari 12 之前也不支持。写成 #ff000080 在 IE 里会跳过整条声明，渲染为透明黑或继承父级背景，调试时容易误判为“样式没生效”。
参数差异：AA 是十六进制值，00 = 全透，FF = 不透，80 ≈ 0.5（因为 0x80 = 128，128 / 255 ≈ 0.502），不是百分比换算，也不是十进制直接填。
- 简写形式
#RGBA（如#f008）仅适用于原色可简写的六位值（如#ff0000→#f00），否则会错位；#f008实际等价于#ff000088，不是#ff000050 - CSS 不支持自动 fallback：“如果
#RRGGBBAA失效就用rgba()”，必须手动写两遍，且顺序不能错
兼容老浏览器必须写 fallback，且顺序不能反
CSS 层叠规则决定了：旧引擎遇到不认识的声明会跳过，继续解析下一条；新引擎则会用后写的那条。所以 fallback 必须写在前面，rgba() 或 #RRGGBBAA 写在后面。
正确写法：
background-color: #2c3e50; background-color: rgba(44, 62, 80, 0.85);
错误写法（IE8 及以下直接无背景）：
background-color: rgba(44, 62, 80, 0.85); background-color: #2c3e50;
验证是否生效：用 getComputedStyle(el).backgroundColor 看控制台返回值，如果是 rgb(255, 0, 0) 就说明 #ff000080 被忽略了。
rgb(0 0 0 / 40%) 这种新语法更简洁但兼容性略逊于 rgba()
这是 CSS Color Level 4 的空格分隔写法，rgb(0 0 0 / 40%) 等价于 rgba(0,0,0,0.4)，也支持 hsl() 和 lab() 等扩展。目前 Chromium 111+、Safari 16.4+ 支持，Firefox 115+ 也已跟进，但 Edge 113 之前、旧版 Safari 仍不支持。
它比 rgba() 少两个括号和逗号，可读性略高，但现阶段仍需配合 rgba() fallback 使用。别把它当 #RRGGBBAA 的平替——它和 rgba() 是同一层级的兼容方案，只是语法糖。
真正容易被忽略的是：透明背景启用后，文字对比度可能跌破 WCAG 4.5:1。哪怕颜色看着“够深”，叠加半透背景后实际可读性可能严重不足，必须用工具实测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
