rgba()是唯一跨浏览器稳定的颜色级透明方案，hex色值不支持透明，#rrggbbaa兼容性差且工具链风险高，现代推荐用rgba()或css变量配合rgb数值操作。
因为RGB（准确说是rgba()）原生支持透明通道，而十六进制色值#RRGGBB本身没有alpha位——硬加两位（如#RRGGBBAA）虽在新浏览器可行，但兼容性和工具链风险高，不是可靠方案。
rgba() 是唯一跨浏览器稳定的颜色级透明方案
HEX色值如#3498db本质是rgb(52, 152, 219)的紧凑写法，它不携带任何透明信息。浏览器解析时直接忽略后缀（比如#3498db80），或在旧环境（IE、Android 4.4 WebView、某些CSS压缩器）中回退为#3498db甚至黑/白默认色。
真正被广泛支持的透明颜色语法只有：rgba(52, 152, 219, 0.6)（IE9+）、rgb(52 152 219 / 0.6)（现代写法，Chrome 87+/Firefox 90+），以及hsla()等带alpha的变体。
-
rgba()第四参数必须是0–1的小数，写成60%或60会整条声明失效 -
rgb(52, 152, 219, 0.6)是无效的——漏了a就不是rgba，浏览器当错误语法丢弃 - 若需兼容IE8及更早，只能降级为纯色：
background-color: #3498db; background-color: rgba(52, 152, 219, 0.6);，后者覆盖前者
JS动态操作颜色时，RGB数值比HEX字符串更直接
CSS计算样式返回的永远是rgb()或rgba()格式：getComputedStyle(el).backgroundColor得到的是"rgb(52, 152, 219)"，不是"#3498db"。想调亮20%、叠加遮罩、响应深色模式切换，直接对数组操作最自然：
const rgb = [52, 152, 219];
const lighter = rgb.map(c => Math.min(255, c * 1.2)); // → [62, 182, 262] → [62, 182, 255]
el.style.backgroundColor = `rgba(${lighter.join()}, 0.7)`;
- 用HEX就得先正则提取
#后字符，再parseInt(hex.slice(1,3), 16)转十进制，大小写、位数、溢出都要手动防错 - HEX无法表达半透状态，每次改透明度都得重新算RGB再拼回HEX，链路长且易出错
- 推荐拆成CSS变量：
--r: 52; --g: 152; --b: 219;，后续用rgb(var(--r), var(--g), var(--b))组合，JS只需改style.setProperty('--r', newR)
#RRGGBBAA 8位Hex看似简洁，实则埋雷
Chrome 93+/Firefox 93+/iOS Safari 15.4+确实支持#3498db80，但它在VS Code里常被语法插件标红，PostCSS或cssnano可能误删后两位，Webpack构建时也可能因配置问题剥离——这些都不是理论风险，而是真实CI失败案例。
-
#3498db80等价于rgba(52, 152, 219, 0.5)，但透明度换算需查表：80十六进制=128十进制→128/255≈0.5，不是直觉上的50% - 部分设计工具（Figma插件、Sketch导出器）仍不识别8位Hex，导出代码自动截断为6位
- 如果你的项目要跑在微信内嵌WebView（Android版稳定在Chrome 71左右）、或企业内网IE11混合环境，
#RRGGBBAA基本等于不可用
真正容易被忽略的点是：rgba()的alpha值不是“背景透明度”的绝对刻度，而是参与颜色混合计算的因子。两个rgba(0,0,0,0.3)叠在一起，结果不是0.6，而是按alpha合成公式算出的视觉灰度——调试时别信直觉，得靠眼睛看、靠DevTools实时调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
