RGBA中alpha值填0.5才是半透明；alpha是0–1浮点数，非百分比；rgba(255,0,0,50)错误，正确为rgba(255,0,0,0.5)；#ff000080为CSS4扩展，IE不支持。
RGBA 中的 alpha 值到底填多少才够“半透明”
alpha 是 0–1 范围的浮点数，不是百分比。填 0.5 才是真正 50% 不透明（即 50% 透明），填 50 会直接失效，浏览器当无效值忽略，回退到不透明黑色。
常见误写：rgba(255, 0, 0, 50) → 错；正确写法：rgba(255, 0, 0, 0.5)。十六进制色值不支持 alpha，#ff000080 是 CSS Color Module Level 4 的扩展写法，但 IE 完全不支持，旧版 Safari 也不认。
- 想兼容老浏览器（如 IE11）：用
rgba()+filter: alpha(opacity=50)双写（仅 IE 支持后者） - alpha =
0时元素完全透明，但仍占据布局空间，点击事件默认仍可触发（除非加pointer-events: none） - alpha =
1等价于纯rgb()或十六进制写法，无性能差异
透明色叠加时颜色怎么算——别指望简单“变淡”
RGBA 的 alpha 控制的是该色块自身的透明度，叠加到背景上时，最终颜色由混合公式计算得出，并非线性变浅。例如 rgba(0, 0, 0, 0.3) 叠在白色背景上，得到的灰不是 #4d4d4d，而是 #4c4c4c（因伽马校正与 sRGB 混合规则）。
- 背景为纯色时可用在线工具模拟结果，但动态背景（如图片、渐变）无法预估视觉效果
- 多个透明层嵌套（比如透明父容器里再放透明子元素），alpha 会复合相乘：
0.5 × 0.5 = 0.25，实际透明度远超预期 - 用
background-color: rgba(...)时，只影响背景区域，文字和边框仍按自身 color / border-color 渲染，不会被“带透明”
opacity 和 RGBA 选哪个？关键看是否要保护子元素
opacity 作用于整个元素及其所有后代，而 rgba() 只作用于指定的颜色属性（如 color、background-color、border-color）。这是最常被混淆的核心区别。
立即学习“前端免费学习笔记（深入）”；
- 要让按钮背景半透但文字保持 100% 不透明 → 用
background-color: rgba(0, 0, 0, 0.2) - 要让整个弹窗（含标题、内容、关闭按钮）一起淡入 → 用
opacity: 0.9 -
opacity触发渲染层（layer），可能提升性能但也可能引发 z-index 层叠问题；rgba()不触发新层，更轻量
Alpha 通道在 CSS 变量和动画里怎么安全使用
CSS 自定义属性（--color）不能直接存 rgba() 字符串然后插值动画，因为 transition 对字符串不生效。必须把 alpha 单独抽成变量，再用 hsl() 或 rgba() 函数组合。
错误写法：--bg: rgba(0, 0, 0, 0.2); transition: --bg 0.3s; → 不会动。
- 推荐方案：定义
--alpha: 0.2，再写background-color: rgba(0, 0, 0, var(--alpha))，然后只过渡--alpha - 用
@keyframes动画 alpha 时，确保起止值都是合法数字（0到1），不要用0%或100%替代 - Safari 对
rgba()中变量的支持较晚（v15.4+），旧版需降级为 JS 控制或固定值
opacity，或者在深色模式下忘了同步调整 alpha 对应的亮度对比度——这时候透明色可能直接导致文字不可读。 
