直接给table加opacity会使文字和边框一同变透明；正确做法是用rgba()设置td/th背景并清空table/tr等父级背景色，或用伪元素叠加透明背景。
table 元素直接加 opacity 会连文字一起变透明
很多人一上来就写 table { opacity: 0.7; }，结果发现文字也发灰、边框也糊了——这是 opacity 的本质行为：它作用于整个元素及其所有子节点。如果你只要背景透、文字清晰，这条路走不通。
适用场景：整张表格（含内容）需要统一淡入/淡出动画，或做视觉遮罩层时临时用一下。
-
opacity值范围是 0～1，0表示完全不可见，1表示完全不透明 - IE8 及以下需 fallback：
filter: alpha(opacity=70);（注意数值是 0～100） - 该属性会触发新层叠上下文，可能影响
z-index行为
td/th 背景用 rgba() 实现“仅背景透明”
这才是表格背景透明的主力方案。用 rgba() 替代纯色或 transparent，既能控透明度，又不碰文字和边框。
常见错误：只给 td 设 background-color: rgba(255,255,255,0.1)，但 tr 或 table 自带背景色，结果还是白底。
立即学习“前端免费学习笔记（深入）”；
- 必须逐层清空父级背景：
table, tr, tbody, thead, tfoot { background-color: transparent; } -
rgba(0,0,0,0)和transparent效果等价，但rgba()支持中间值（如0.05） - IE8 及以下不支持
rgba()，若需兼容，得用 PNG 透明背景图或 JS 检测降级
table {
border-collapse: collapse;
border-spacing: 0;
}
table, tr, th, td {
background-color: transparent;
}
td {
background-color: rgba(255, 255, 255, 0.08);
}
transparent 关键字在 table 上容易被“吃掉”
写 td { background-color: transparent; } 却没效果？大概率是被默认样式或父级覆盖了。
浏览器对 table 元素有隐式样式：比如 Chrome 默认给 tbody 加浅灰背景，Firefox 可能给 tr 加 hover 色——这些都会盖掉你的 transparent。
- 检查 computed styles，确认最终生效的是哪条规则
- 用
!important临时验证是否被覆盖（上线前应改选择器优先级） -
transparent不是“颜色代码”，不能用于border-color等需要真实颜色值的地方（IE 下部分属性会失效）
伪元素方案：给表格加一层可控透明背景
当你要叠加渐变、图片或复杂蒙版，又不想动文字层时，用 ::before 最稳妥。
核心是把背景抽离成绝对定位伪元素，压在底层，文字自然保持高对比度。
- 容器必须设
position: relative - 伪元素
z-index: -1或负值确保在文字之下 - 避免用
opacity在伪元素上——它仍会透出下层内容，导致多层叠加异常
.table-container {
position: relative;
}
.table-container::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
z-index: -1;
}
真正麻烦的不是写哪行代码，而是查哪一层背景还在偷偷生效。哪怕你把 td 设成 transparent，只要 tr:hover 里有一行没清掉的 background，鼠标移过去就露馅。
