rgba() 的 alpha 值必须用 0–1 小数（如 0.5）或百分比（如 50%），禁用 0–100 整数；旧浏览器不支持时需 fallback；rgba() 仅作用于单个颜色属性，opacity 则影响整个元素及子元素。
rgba() 函数怎么写才不会透明失效
直接用 rgba() 设置颜色时，透明度不生效，大概率是 alpha 值写成了 0–100 的整数（比如 rgba(255, 0, 0, 50)），但实际它只接受 0–1 的小数（如 rgba(255, 0, 0, 0.5)）或百分比（rgba(255, 0, 0, 50%)，CSS Color Module Level 4 支持，但兼容性略弱）。旧版浏览器（如 IE8 及更早）完全不支持 rgba()，会直接忽略整条声明。
常见错误现象：background-color: rgba(0, 0, 0, 0.3); 在部分安卓 WebView 或低版本 Safari 中显示为纯黑（降级成 rgb(0, 0, 0)），因为 alpha 被丢弃。
- alpha 值推荐始终用小数形式：0 表示全透明，1 表示不透明
- 避免混用单位：不要写
rgba(255, 0, 0, 0.3)和rgba(255, 0, 0, 30%)在同一项目中，以防团队协作时理解偏差 - 若需兼容 IE8，得额外提供 fallback：
color: #000;<br>color: rgba(0, 0, 0, 0.7);
（IE8 只认第一行）
opacity 和 rgba() 的透明效果有什么本质区别
opacity 作用于整个元素及其所有子内容（包括文字、边框、子元素），而 rgba() 只影响被设置的那一个颜色属性（如 background-color 或 color），不影响布局和其他样式。
典型误用场景：想让半透明背景上的文字保持不透明，却对容器设了 opacity: 0.6，结果文字也变淡了。这时必须改用 background-color: rgba(0, 0, 0, 0.6)，文字颜色单独设为 color: #fff。
立即学习“前端免费学习笔记（深入）”；
-
opacity是继承的，子元素无法通过设置opacity: 1恢复；rgba()不继承，互不影响 -
opacity会影响元素的点击区域和 z-index 层叠行为；rgba()不影响这些 - 动画性能上，
opacity是可硬件加速的属性，rgba()改变颜色值通常触发重绘（paint），频繁变化时更耗资源
HEX 颜色怎么快速转成带透明度的 rgba
CSS 本身不支持直接写 #rrggbbaa（虽然现代浏览器已支持 8 位 HEX 如 #00000080），但转换逻辑简单：前六位是 RGB，后两位是 alpha 的十六进制（00–FF → 0–1 小数）。例如 #ff6b6b80 对应 rgba(255, 107, 107, 0.5)（因为 0x80 ≈ 128/255 ≈ 0.5）。
注意：别把 8 位 HEX 当作标准写法到处用——iOS 13 以下、Android 4.4 WebView 等仍不支持，生产环境建议优先用 rgba() 并保留 fallback。
- 手动换算公式：alpha 小数 = parseInt('xx', 16) / 255，其中 'xx' 是最后两位十六进制
- VS Code 插件（如 “Color Highlight”）或浏览器 DevTools 的颜色拾取器，点开颜色面板通常能自动显示 rgba 等效值
- 构建工具里可用 PostCSS 插件（如
postcss-opacity）把rgba()自动补全兼容写法
为什么 background-color: rgba(0,0,0,0) 有时没效果
看起来“应该透明”，但元素依然遮挡内容，往往是因为该元素还有其他不透明的样式：比如设置了 border、box-shadow、伪元素 ::before 或背景图 background-image。这些都不会被 background-color: rgba(0,0,0,0) 影响。
另一个隐蔽原因：父元素设置了 overflow: hidden，而子元素的透明背景区域本应透出更下层的内容，却被裁剪了。
- 检查是否真只有背景色需要透明——用 DevTools 逐个关闭
border、outline、box-shadow确认 -
rgba(0,0,0,0)和transparent效果一致，但后者语义更清晰，也兼容所有浏览器 - 如果目标是“完全不可见且不占交互空间”，考虑用
visibility: hidden或display: none，而不是仅调透明度
