能，background-color: transparent 是完全透明的，等价于 rgba(0,0,0,0)；常见不透明是因父元素背景透出、background 简写覆盖、UA 默认样式或自定义属性 fallback 导致。
background-color: transparent 能否真正透明？
能，但前提是父元素没挡住它——transparent 本身是合法且完全透明的取值，不是“半透明”或“近似透明”，它等价于 alpha 为 0 的 rgba(0,0,0,0)。问题往往出在层级、继承或父容器背景上。
为什么设了 transparent 还能看到颜色？
常见错误现象：background-color: transparent 写了，但元素看起来还是有底色；或者鼠标悬停后颜色“闪一下”才消失。
- 父元素设置了
background-color，子元素透明时自然透出父级背景 - 用了
background简写属性覆盖了transparent（比如background: #fff url(...) no-repeat;会重置整个背景，忽略之前单独设的background-color） - 浏览器默认样式干扰：某些标签（如
button、input）自带 UA 样式背景，需显式重置background-color和background-image
transparent 和 rgba(0,0,0,0) 有区别吗？
视觉效果完全一致，但语义和兼容性略有不同：
-
transparent是 CSS2 就支持的关键字，IE8+ 全支持；rgba()在 IE9+ 才可靠支持（IE8 及以下不认 rgba，会直接丢弃整条声明） - 用
transparent更简洁，也更明确表达“不要背景色”的意图，而非“黑+全透明” - 动画/过渡中，
transparent无法与rgb()或hex值做颜色插值（浏览器会跳变），需要平滑过渡时得统一用rgba()
哪些场景下 transparent 不起作用？
不是语法失效，而是它被更高优先级的背景定义覆盖了：
立即学习“前端免费学习笔记（深入）”；
- 使用了
background简写（如background: linear-gradient(...), url(...);），会清空background-color的独立设置 - CSS 自定义属性里写了
background-color: var(--bg, #fff)，但--bg没定义或 fallback 是非透明值 - 伪元素（如
::before）设置了background，而主元素设transparent，两者不冲突，但容易误以为“没生效”
最稳妥的做法：检查 computed styles 中 background-color 是否真为 transparent，而不是看源码写了没写。
