table或td设background-color: transparent无效，主因是父级（如table、tbody或bootstrap框架）默认设了#fff背景，且border-collapse: separate留出的间隙显示父容器背景；解决需同步清除父级背景、设border-collapse: collapse、用rgba()替代transparent，并避免滥用opacity。
table或td设background-color: transparent为什么没用
写了background-color: transparent却还是白底，大概率不是代码写错了，而是被父级“盖住”了：比如table、tbody甚至外部框架（如 Bootstrap）默认加了background-color: #fff，子元素再透明也透不出去。另外，浏览器默认的border-collapse: separate会留出border-spacing间隙，这些缝隙显示的是父容器背景，视觉上就像“不透明”。
解决方法必须同步清理三层干扰：
-
table和tbody上显式移除background-color（哪怕只是重置为initial或unset） table { border-collapse: collapse; border-spacing: 0; }-
td, th { border: none; }或至少设border-color: transparent
用rgba()控制背景透明度更可靠
background-color: rgba(255, 255, 255, 0)等价于transparent，但rgba()能精确调试——比如rgba(255, 255, 255, 0.05)轻微提亮文字又不遮背景图，rgba(0, 0, 0, 0.1)增强表头可读性。它只动背景色，不影响文字、边框、内嵌元素。
注意两点：
- alpha 值是小数（
0.08），不是百分比（8%）或整数（80），写错整条声明会被浏览器忽略 - IE8 及以下不支持
rgba()，需 fallback：background-image: url(white-80.png);
别给table直接加opacity
table { opacity: 0.7; }会让文字、边框、input、链接全部变淡，可读性和交互体验直接下降。这不是 bug，是 opacity 的设计逻辑：它作用于整个渲染层，子元素无法用opacity: 1恢复。
更麻烦的是，如果父容器也有opacity（比如外层div设了opacity: 0.9），最终效果是乘积（0.7 × 0.9 = 0.63），且你根本没法在表格内部“拉回来”。
真要整体弱化，建议用伪元素方案：.table-container::before盖一层rgba()背景，z-index: -1，表格本身保持opacity: 1。
复杂背景（如图片/渐变）下怎么让表格真正“透”出来
纯色背景上设rgba()看不出效果；只有当表格放在 banner 图、视频或线性渐变上时，“透”才有意义。这时单靠rgba()可能仍显单薄，需要叠加可控遮罩：
- 给外层容器设
position: relative，再用::before画一层绝对定位背景，通过opacity或background: linear-gradient(rgba(), rgba()), url(...)组合 - 确保伪元素
z-index: -1，且父容器**不能**有overflow: hidden或contain: layout——这些会截断 backdrop 渲染链路 - 若想磨砂玻璃感，
backdrop-filter: blur(4px)必须加在外层容器上，且表格不能是overflow: hidden的子元素
最容易被忽略的，永远是那个没显式声明、却默默撑起白色背景的tbody或框架默认样式——它不在你的 CSS 里，但在 computed styles 里清清楚楚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
