rrggbb无法设置透明度，因其仅含rgb三通道，无alpha位；合法方式为rgba()（alpha须为0–1小数）或现代浏览器支持的#rrggbbaa（如#ff000080），后者需注意兼容性与aa值换算。
为什么#RRGGBB写不出透明度？
因为标准6位十六进制颜色码#RRGGBB只定义红、绿、蓝三通道，没有预留透明度（Alpha）位置。浏览器解析时直接忽略后续字符，比如#RRGGBBAA写成#RRGGBB80会被当作无效值处理，回退到默认色或继承色。
真正支持透明度的两种合法方式是：rgba()函数和8位十六进制颜色（#RRGGBBAA），但后者需注意浏览器兼容性。
rgba()怎么写才不踩坑？
rgba()接受四个参数：红、绿、蓝（0–255）和Alpha（0–1，非百分比）。常见错误是把Alpha写成50%或50，这会导致整个声明失效。
-
rgba(255, 0, 0, 0.5)✅ 半透红色 -
rgba(255, 0, 0, 50%)❌ 语法错误，被丢弃 -
rgba(100%, 0%, 0%, 0.5)✅ 合法，但不如数值直观 - Alpha为
0时元素完全透明，但依然占据布局空间
8位Hex（#RRGGBBAA）哪些浏览器能用？
Chrome 69+、Firefox 49+、Safari 12+、Edge 79+ 支持；IE全系列不支持。若项目需兼容IE或旧版Safari，不能单独依赖该写法。
注意：#RRGGBBAA中的后两位是十六进制Alpha值（00–FF），不是十进制。例如半透（50%）对应80，不是50：
-
#FF000080✅ 红色，Alpha = 128/255 ≈ 0.5 -
#FF000050❌ 实际Alpha ≈ 0.31，不是50% -
#0000（4位写法）不支持Alpha，仅#RGBA是4位缩写，无透明含义
透明度叠加时为什么颜色变深了？
当父容器设了rgba()或#RRGGBBAA，子元素又设透明背景，Alpha会嵌套相乘。例如父层rgba(0,0,0,0.5) + 子层rgba(255,255,255,0.5)，最终灰度不是中间值，而是0.5 × 0.5 = 0.25叠加效果。
避免意外叠加的方法：
- 优先对最外层容器设透明背景，内部用纯色
- 用
background-color: transparent代替低Alpha值清空背景 - 调试时临时加
outline: 1px solid red确认实际渲染区域
Alpha值不是线性感知亮度，调色时建议在真实页面中预览，别只靠数值估算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
