rrggbbaa是css color module level 4定义的八位hex格式，末两位aa表示alpha通道，需配fallback且不被旧浏览器支持；rgba()兼容性更好，alpha须为0–1小数。
HEX颜色后加两位不是“简写”，是八位格式#RRGGBBAA
所谓“Hex后面加两位”，不是传统HEX的简写形式，而是CSS Color Module Level 4定义的八位十六进制格式#RRGGBBAA，其中最后两位AA表示alpha通道（透明度）。它和三位/六位HEX属于不同语法层级，不能混为一谈。
常见错误现象：把#ff000080当成#ff0000的“带透明度版本”直接上线，结果在IE或旧版Safari里背景彻底消失或变黑——因为这些浏览器根本不识别该格式，整条声明被丢弃。
-
#RRGGBBAA中AA是十六进制值，00= 全透，FF= 不透，80≈ 0.502（128 ÷ 255） - 不存在“四位HEX”或“七位HEX”；
#f008这种写法仅在原始六位可缩写时成立（如#ff0000→#f00），此时#f008实际等价于#ff000088，不是#ff000050 - VS Code、Stylelint、CSS压缩工具（如cssnano）可能报错或误删
#RRGGBBAA，尤其在未启用Color Module Level 4支持时
rgba()才是透明背景的首选，alpha必须是0–1小数
用rgba()设置透明背景，兼容性稳、语义清、工具链友好。关键限制只有一条：alpha参数必须是0–1之间的小数，不是百分比，也不是整数。
常见错误现象：写成rgba(0, 0, 0, 50%)或rgba(0, 0, 0, 50)，浏览器直接忽略整条background-color声明，回退到父级背景或默认色，调试时容易误判为“样式没加载”。
- 正确写法：
background-color: rgba(37, 99, 235, 0.8)（对应品牌蓝#2563eb+ 80%不透明） - JS动态操作时，
getComputedStyle(el).backgroundColor返回的就是这种格式，无需额外解析 - 与
opacity本质不同：rgba()只影响当前颜色属性，文字、子元素、边框保持原样；opacity会让整个元素树一起变淡
什么时候该用#RRGGBBAA，什么时候必须fallback
八位HEX适合现代项目快速书写，但必须前置fallback色值，并确认目标环境支持。它不是“更高级的HEX”，而是一种有条件启用的增强能力。
使用场景有限：CI流程已接入caniuse-api校验、团队明确放弃IE及Safari ≤12、设计系统输出工具原生支持Level 4语法。
- 必须写fallback：
background-color: #2563eb; background-color: #2563eb80;（后者覆盖前者） - 不要和
rgba()混用同一组件：比如一个按钮同时有background-color: rgba(37, 99, 235, 0.8)和background-color: #2563eb80，压缩后可能只剩一条，行为不可控 - 八位HEX无法参与CSS自定义属性计算：
color-mix(in srgb, var(--primary), white 30%)不接受#2563eb80作为输入
真正难调的从来不是色值本身
写了#2563eb80或rgba(37, 99, 235, 0.8)却看不到透明效果？问题几乎从不在数值转换或拼写——而在选择器是否命中、属性名是否写错、是否被更高优先级规则覆盖。
打开开发者工具，先看「Computed」面板里background-color最终计算值是不是你写的那个；再看「Styles」面板里那行是否被划掉（语法错误）或灰色（被覆盖）。很多所谓“HEX不生效”，其实是div .card p { background-color: ... }误写了选择器，或者把text-colour当成了color。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
