最稳妥用 rgba()，alpha 必须为 0–1 小数（如 0.7），禁用整数或百分比；#RRGGBBAA 兼容性差，需前置 fallback 色值，且仅现代浏览器支持。
直接用 rgba() 最稳妥，#RRGGBBAA 写法虽简洁但兼容性有硬伤，别在没确认目标环境时硬上。
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() 是首选。它只作用于颜色本身，不会让文字跟着变淡。
- 别把
opacity和rgba()混用：opacity: 0.5会让整个元素及其所有子节点一起变半透，而background-color: rgba(0,0,0,0.5)只让背景透 - 十六进制转
rgba()要先解码：比如#3498db→ 先拆成34、98、db，再用parseInt('34', 16)得到52、152、219，最后拼成rgba(52, 152, 219, 0.8) - 浅色背景（如
#f8f9fa）加高 alpha（如0.9）可能看不出效果，建议从0.7开始往下调
#RRGGBBAA 八位十六进制在现代浏览器才真正可用
#RRGGBBAA 是 CSS Color Module Level 4 标准，Chrome 65+、Firefox 49+、Edge 79+ 支持稳定；但 IE 完全不识别，Safari 12 之前也不支持。写成 #ff000080 在 IE 里会直接失效，渲染为透明黑或继承父级背景，调试时容易误判为“样式没生效”。
立即学习“前端免费学习笔记（深入）”；
参数差异：AA 是十六进制值，00 = 全透，FF = 不透，80 ≈ 0.5（因为 0x80 = 128，128 / 255 ≈ 0.502）。注意不是百分比换算，也不是十进制直接填。
- 简写形式
#RGBA（如#f008）仅适用于原色可简写的六位值（如#ff0000→#f00），否则会错位；#f008实际等价于#ff000088，不是#ff000050 - 不能靠 fallback 自动降级：CSS 不支持“如果
#RRGGBBAA失效就用rgba()”，必须手动写两遍，且顺序不能错 - 验证是否生效：用
getComputedStyle(el).backgroundColor看控制台返回值，如果是rgb(255, 0, 0)就说明#ff000080被忽略了
兼容老浏览器必须写 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;
- IE8 及更早版本对
rgba()完全不支持，只能靠filter: progid:DXImageTransform.Microsoft.gradient模拟，但仅限线性渐变，纯色背景无法真实还原 - PostCSS 插件
postcss-color-rgba-fallback可自动补六位后备色，但得确认构建流程覆盖所有 CSS 入口，否则漏掉一个文件就白忙 - 移动端要注意 Android 4.3 以下、iOS 6 以下也存在兼容问题，不能只测 Chrome 和最新 Safari
真正麻烦的不是写法本身，而是不同环境对“不认识的语法”的处理逻辑不一致——有的静默忽略，有的报 warning，有的连带整条规则块失效。动手前先查目标平台的 rgba() 和 #RRGGBBAA 支持表，比写完再调兼容更省时间。
