RRGGBBAA是CSS Color Module Level 4正式标准,最后两位AA为alpha值(00完全透明,FF完全不透明),需十六进制换算,非百分比或小数,且须兼容rgba()降级写法。

直接在#RRGGBB后面加两位十六进制(#RRGGBBAA)就能定义透明度
现代浏览器支持8位十六进制颜色语法,#RRGGBBAA 中最后两位 AA 就是 alpha 通道值,范围是 00(完全透明)到 FF(完全不透明)。这不是“可选技巧”,而是 CSS Color Module Level 4 正式标准,Chrome 65+、Firefox 49+、Edge 79+、Safari 12.1+ 均已稳定支持。
透明度值 AA 不是百分比,也不是小数,必须换算成十六进制
常见误区是把 0.5 直接写成 #ff000050 —— 错了。50 是十六进制,对应十进制 80,透明度 ≈ 80 / 255 ≈ 31%,不是 50%。真正 50% 透明度应填 7F(因为 255 × 0.5 = 127.5 → 取整 127 → 十六进制 7F)。
-
FF= 100% 不透明(等价于省略透明度的6位写法) -
80≈ 50% 透明度(128/255) -
CC≈ 20% 透明度(204/255) -
00= 完全透明(内容不可见)
IE 和旧版 Safari 不识别 #RRGGBBAA,必须手动 fallback
CSS 不会自动降级。如果只写 background-color: #00000080,IE 会完全忽略该声明,可能渲染为默认黑或继承父背景,调试时容易误判为“样式没生效”。
- 必须显式写出兼容写法:先写
rgba(),再写#RRGGBBAA(顺序不能反) - 例如:
color: rgba(0, 0, 0, 0.5); color: #00000080; - 简写形式
#RGBA(如#f008)仅对原色可简写的值安全(#f00→#ff0000),否则会错位解析,慎用
八位写法不支持简写,#RGBAA 是无效语法
六位色值可简写为 #RGB(如 #fff),但八位色值没有对应简写规范。写成 #f008 实际被解析为 #ff000088,而非你想要的 #ff000050 或 #f00 + 50% 透明度。
立即学习“前端免费学习笔记(深入)”;
- 所有八位颜色必须写满8位:
#FF5733CC✅,#F53C❌ - 想快速查常用透明度对应值?记牢这几个:
FF(不透)、CC(≈20%)、99(≈40%)、7F(≈50%)、33(≈80%)、00(全透) - 手算麻烦?用
Math.round(alpha * 255).toString(16).padStart(2, '0')一行 JS 就能转
实际使用中最容易被忽略的是:透明度值 AA 越小,颜色越透明;它和日常说的“透明度百分比”数值方向相反(00=100%透明,FF=0%透明),且必须是十六进制,不能填小数或百分比字符串。


















