关键在于清除父级背景色和表格间隙：table需设border-collapse:collapse、border-spacing:0，tr和td均需显式设background-color:transparent，且优先用rgba()替代transparent以精确控透明度。
background-color: transparent 为什么没用
写了 background-color: transparent 却看不到底层内容，大概率不是语法错，而是被父级或默认样式“盖住了”。<table>、<code><tr>、甚至 <code><tbody> 自带背景色（比如浏览器默认灰或框架注入的白），子元素再透明也没用。另外，某些 UI 框架（如 Element Plus）会为 <code>.el-table__body 或 tr:hover 单独设背景，覆盖你的设置。
排查要点：
- 检查
<table> 和所有 <code><tr> 是否有显式 <code>background-color - 确认没有更宽泛的选择器（如
table tr td）在外部 CSS 中重置了透明 - 用浏览器开发者工具逐层查看 computed styles，看哪一层 background 实际生效
用 rgba() 控制背景透明度更可靠
transparent 是全透明开关，但多数场景要的是“微透”——比如浅白底透出背景图，或灰底轻微提亮文字。rgba() 能精确控制 alpha 值，且只作用于背景，不影响文字清晰度。
示例写法：
立即学习“前端免费学习笔记（深入）”；
td {
background-color: rgba(255, 255, 255, 0.08);
}
注意点：
- alpha = 0 等价于
transparent；alpha = 1 就是纯色不透明 - IE8 及以下不支持
rgba()，若需兼容，得 fallback 到 PNG 透明图或 JS 动态判断 - 别用
rgb()加opacity混搭——那会把文字也变淡
table 默认边框和间距会破坏透明感
即使 td 背景设成透明，浏览器默认的 border-spacing（单元格间隙）和 border-collapse: separate 会让相邻单元格之间露出父容器底色，看起来像“断开的透明”，实际是空白缝隙。
必须显式清理：
table {
border-collapse: collapse;
border-spacing: 0;
}
td {
background-color: transparent;
border: none;
}
额外提醒：
-
border: none比border-color: transparent更彻底，避免某些渲染引擎对透明边框的处理差异 - 如果用了
th，同样要对其应用相同规则，否则表头和单元格透明不一致
opacity 不适合单给表格背景加透明
对 <table> 或 <code><td> 直接加 <code>opacity: 0.8，整个单元格（含文字、边框、内联图片）都会变淡。这不是“背景透明”，是“整块糊上毛玻璃”。尤其当表格里有可点击文字或图标时，可读性和交互性会明显下降。
真要整体降透明度，只在极少数场景适用：
- 作为视觉遮罩层（比如弹窗背后的半透表格）
- 临时禁用状态提示（配合
pointer-events: none） - 但绝不能用于日常表格美化——它绕过了背景与内容的分离控制
真正让单元格背景“透出来”的关键，从来不是选哪个值，而是清掉所有中间层的背景色、边框、间隙，并确保透明设置落在最末级渲染节点上。很多人调半天没效果，问题往往卡在 <tr> 这一级被忽略的 background-color 上。</tr>
