alpha值是颜色的透光率参数，决定颜色与背景混合的权重：0为完全透明，1为完全不透明，中间值按r=r₁×α+r₂×(1−α)公式逐像素合成。
alpha值就是颜色的“透光率”参数
alpha值不是额外加上的效果，而是颜色本身的一部分——它直接决定这个颜色在渲染时和背景混合的权重。值为0时，颜色完全不参与显示（相当于没画）；值为1时，颜色完全覆盖背景；中间值如0.3，表示该颜色贡献30%亮度，背景贡献70%。这不是“淡一点”的视觉错觉，而是浏览器按公式R = R₁×α + R₂×(1−α)逐像素算出来的合成结果。
rgba() 和 hsla() 中的 alpha 写法必须严格守规矩
常见失效不是因为浏览器不支持，而是参数格式出错：
-
rgba(255, 0, 0, 50%)❌ —— alpha 不接受百分比，必须是0.5 -
hsla(120, 100, 50, 0.3)❌ ——saturation和lightness必须带%，写成100%、50% -
#ff000080✅ —— 这是 CSS Color Level 4 新语法，后两位80对应 alpha ≈0.5（128/255），但旧版 Safari 和部分安卓 WebView 可能忽略
别用 opacity 替代 alpha，除非你真想让文字和图标一起变淡
给整个容器设 opacity: 0.5，子元素会继承透明度；而用 background-color: rgba(0, 0, 0, 0.5)，只影响背景，文字、边框、伪元素都保持原样。这是两个完全不同的作用域：
- alpha 是颜色级控制，只改某一个
color、background-color或border-color -
opacity是元素级控制，影响自身及其所有后代节点的渲染栈 - 如果只要背景半透，却误用了
opacity，就会导致按钮文字发虚、图标看不清——这种问题在线上页面里特别难排查
兼容性 fallback 要写在前面，且不能靠注释隔开
IE8 及更早版本不认 rgba()，但现代浏览器会按声明顺序覆盖。正确写法是：
立即学习“前端免费学习笔记（深入）”；
button {
background-color: #ff6b6b; /* fallback for old IE */
background-color: rgba(255, 107, 107, 0.7);
}注意：rgba() 必须紧接在 fallback 后面，中间不能有空行或注释分隔，否则某些旧版解析器会跳过整条规则。另外，CSS 预处理器（如 Sass）里用 transparentize($color, $amount) 生成 rgba 值时，也要确认输出是否符合 0–1 范围——比如传入 0.5 得到 0.5，而不是 50。
真正容易被忽略的，是 alpha 值参与颜色混合的数学本质：它不是开关，而是比例系数。调色时如果只凭感觉调 0.4 和 0.6，可能在深色背景上几乎看不出差别，在浅色背景上却突然“飘起来”。验证方式很简单：把同一段 rgba() 放在黑底、白底、灰底三个容器里看效果——这才是 alpha 的真实表现。
