rrggbbaa中aa是0–255透明度的十六进制值，非百分比直拼；50%→80、10%→19；chrome65+/firefox49+/safari12+支持，ie不支持；推荐用rgba()或hsla()配合css变量动态控制。
十六进制颜色后直接拼接透明度？不行，#RRGGBBAA 是标准但不是“拼百分比”
CSS 里 #RRGGBBAA 确实支持带透明度的 8 位十六进制写法，但那个 AA 不是“百分比转成两位十六进制”的自由拼接结果——它是透明度值（0–255）的十六进制表示，和百分比要换算。
比如 50% 透明度 ≠ 50，而是 255 × 0.5 = 127.5 → 取整 128 → 十六进制 80；10% 透明度 ≈ 25.5 → 19（不是 10）。
-
#00000000是全透明（黑+0%），#000000FF是全不透明（黑+100%） - 常见误写：
#33333310想表达 10% 透明，实际是 ≈6.3%，因为10₁₆ = 16₁₀ → 16/255 ≈ 6.3% - 浏览器兼容性：Chrome 65+、Firefox 49+、Safari 12+ 支持
#RRGGBBAA；IE 完全不支持
想用变量控制透明度？别硬拼字符串，用 rgba() 或 hsla() 更可靠
CSS 自定义属性（--color）不能直接参与颜色计算，所以没法把 --alpha: 0.4 和 #333 “拼”成带透明的色值。真正能动态组合的，是函数式写法。
- 推荐用
rgba(var(--r), var(--g), var(--b), var(--alpha))，配合:root里拆好的 RGB 分量 - 或者更简洁：定义 HSL 基色 + 单独透明度变量，
hsla(200, 100%, 50%, var(--alpha)) - 避免用
color-mix()在老浏览器 fallback 场景下失效（目前仅 Chrome 111+ 支持）
示例：
:root {
--primary-h: 210;
--primary-s: 100%;
--primary-l: 40%;
--alpha: 0.7;
}
.btn {
background: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--alpha));
}
#RRGGBBAA 的透明度换算表：别现场算，记几个关键值就够了
手算容易出错，实际开发中记住这几个常用值比每次都算更快也更稳：
- 100% →
FF（255） - 80% →
CC（204） - 50% →
80（128） - 30% →
4D（77） - 15% →
26（38） - 0% →
00（0）
注意：CC 是十六进制，不是字母 C 重复两次；大小写不敏感，但建议统一小写（#333cc 是错的，必须是 #333333CC）。
用预处理器（如 Sass）时，transparentize() 比手动拼更安全
Sass 的 transparentize($color, $amount) 会自动按 HSL 模型降明度+加 alpha，比自己算 AA 值更符合人眼感知，也避开 RGB 色彩空间的不均匀问题。
-
transparentize(#007bff, 0.3)→rgba(0, 123, 255, 0.7)（不是#007bffB3） - 输出仍是 rgba，确保 IE11 兼容（如果还需要支持）
- PostCSS 插件如
postcss-color-function也能类似处理，但需构建流程介入
纯 CSS 场景下，没有运行时计算能力，所谓“变量后拼百分比”本质上是个误解——CSS 变量不支持字符串拼接或进制转换，强行模拟只会掉坑里。
真正要灵活控透明，要么用函数式颜色（rgba/hsla），要么靠构建时处理，别指望在 :root 里写个 --hex-alpha: 80 然后 background: #333#{$--hex-alpha} 这种事能成。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
