要让表格背景真正透明，须用rgba()设置背景色并清除table默认样式；因父级背景、border-spacing及样式权重常导致transparent失效，opacity则会降低文字可读性。
表格背景要真正“透出来”，不是写个 transparent 就完事——关键在层级、继承和默认样式干扰。直接上结论：优先用 rgba() 控制背景色透明度，配以显式清除 table 和 td 的默认边框与间距，否则你写的透明根本不会生效。
为什么 background-color: transparent 在 td 里经常失效
写了却还是白底？大概率是被父级“盖住”了：
-
table或tbody自带背景色（比如某些 UI 框架或重置样式里设了background-color: #fff），子元素再透明也没用 - 浏览器默认给
table加了border-collapse: separate和border-spacing，中间那点缝隙会显示父容器背景，看起来像“不透明” - CSS 选择器权重问题：外部样式表里一条
table tr td { background: #f9f9f9; }直接覆盖你的内联transparent
rgba() 是更可靠的选择（尤其需要微调透明度时）
它只动背景色，不影响文字、边框、内容清晰度，且 alpha 值可精确控制：
-
rgba(255, 255, 255, 0)等价于transparent，但语义更明确 -
rgba(0, 0, 0, 0.03)这类极低 alpha 值能轻微提对比，又不遮挡背景图或底色 - 现代浏览器全支持；IE9+ 可用，IE8 及以下需 fallback（如 PNG 透明背景图）
示例写法：
td { background-color: rgba(255, 255, 255, 0.05); }
必须同步清理的 table 默认样式
哪怕你用了 rgba()，没清这些，照样出问题：
-
table { border-collapse: collapse; }—— 防止单元格间留缝 -
table { border-spacing: 0; }—— 清除 cellspacing -
td, th { border: none; }—— 避免边框自带颜色“撑起”视觉不透明感 - 检查并移除
tr:hover、tbody、table上可能存在的background-color
别用 opacity 直接套 table
它会让文字、边框、所有子元素一起变灰，几乎不可读：
-
table { opacity: 0.8; }→ 文字也变淡，可访问性崩坏 - 若真需要整体弱化，建议用伪元素盖一层
rgba()背景 +z-index: -1，文字层保持原样 - 特别注意：
opacity会触发新层叠上下文，可能意外改变 z-order 行为
真正透，靠的是层层剥离干扰项，而不是堆透明属性。最容易被忽略的，永远是那个没显式声明、却默默撑起白色背景的 tbody 或框架默认样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
