rgba()的alpha值必须为0–1小数，非百分比或0–255；父级opacity会全局降透明度而掩盖子元素rgba效果；z-index遮挡、IE8不支持及背景无内容可透出亦致透明失效。
color 或 background-color 用了 rgba() 但没生效
rgba() 中的 a（alpha）值必须是 0–1 的小数，不是百分比或 0–255。写成 rgba(0,0,0,50%) 或 rgba(0,0,0,128) 都会被浏览器忽略，退回到不透明的默认行为。
-
rgba(0,0,0,0.5)✅ 正确：半透黑 -
rgba(0,0,0,50)❌ 无效：浏览器当非法值丢弃，回退为rgb(0,0,0) -
hsla(0,0%,0%,0.3)✅ 同理可用，但 alpha 仍需小数
父元素设置了 opacity 导致子元素“假透明”
如果父容器用了 opacity: 0.7，子元素即使自身设了 background-color: rgba(255,0,0,1)，视觉上也会被压暗——这不是子元素透明，而是整个 DOM 子树被统一降不透明度。此时子元素的 rgba() 设置实际有效，但被父级 opacity 叠加覆盖了。
- 改用
background-color: rgba()替代父级opacity更可控 -
opacity会影响所有后代（包括文字、边框、阴影），rgba()只作用于当前颜色属性 - 遇到需要局部透明又不想影响文字时，优先选
rgba()而非opacity
z-index 和层叠上下文让透明“看不见”
设置了透明色却看不出效果，可能是该元素被上层不透明元素完全遮挡。尤其在使用 position: relative/absolute + z-index 时，若上层元素没有设置 background-color（即默认透明），它不会遮挡；但只要它有任意不透明背景（哪怕只是 #fff），就会盖住下层的透明效果。
- 用浏览器开发者工具的“元素高亮”功能逐层关闭上层元素，确认是否被遮挡
- 检查上层元素是否意外继承了不透明背景（例如重置样式中写了
background: #fff） - 透明色只在“背后有内容可透出”时才可见；纯白页面背景上设
rgba(0,0,0,0.1)效果极弱，容易误判为失效
IE 8 及更早版本根本不支持 rgba()
如果你在旧版 IE 下测试，rgba() 会被直接忽略，浏览器会尝试下一个声明（如果有），否则回退到初始值（比如 transparent 或继承色）。这不是 bug，是原生不支持。
立即学习“前端免费学习笔记（深入）”；
- IE 9+ 支持
rgba()，IE 8 只能靠filter: progid:DXImageTransform.Microsoft.gradient()模拟（不推荐） - 现代项目通常不再兼容 IE 8，但若需支持，建议用 CSS 预处理器生成 fallback：
background-color: #ff0000; background-color: rgba(255,0,0,0.5);
- 注意：CSS 中后写的声明会覆盖前一个，所以
rgba()必须放在rgb()或十六进制之后
真正卡住的地方往往不是语法写错，而是透明色背后没东西可透、被父级 opacity 统一压制、或者调试时没关掉上层遮罩层。动手前先打开开发者工具，把 hover 状态和 computed 样式拉出来看一眼 background-color 实际解析值，比反复改代码更快。
