17370845950

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 实际解析值，比反复改代码更快。