不能用 opacity 给表格设透明背景，因为它会使文字、边框等所有子元素一同变淡，降低可读性；应使用 background-color: rgba() 单独控制背景透明度，文字和边框保持不透明。
直接用 background-color: rgba() 给 <table> 或其 <tbody>/<tr> 设置背景色，就能实现背景半透明、文字不透明的效果。别用 opacity，它会让表格里所有文字和边框一起变淡，可读性崩掉。
为什么不能用 opacity 给表格设透明背景
opacity 作用于整个元素及其所有子节点——包括 <td> 里的文字、内边距、边框线。哪怕你只想要“背景透一点”，opacity: 0.7 也会让字体发虚、边框变细、对齐错位。尤其在深色背景下，文字可能直接看不清。
常见错误现象：<table style="opacity: 0.6"> 后发现表格内容像蒙了层灰，导出 PDF 或截图时文字边缘糊成一片；响应式缩放后透明叠加更难读。
- 它无法单独控制背景层，纯属“暴力降透明度”
- 继承性太强：子元素没法通过
opacity: 1拉回来（opacity 不叠加，但会嵌套衰减） - 跟
transform、filter一起用时容易触发额外图层合成，性能略差
rgba() 设置表格背景的正确写法
把 background-color 写在 <table>、<tr> 或 <td> 上，用 rgba(r, g, b, a) 值。Alpha 参数（第四个数）控制背景透多少，文字和边框完全不受影响。
立即学习“前端免费学习笔记（深入）”；
示例：给整张表加一层浅灰半透底色
table {
background-color: rgba(245, 245, 245, 0.8);
}
关键点：
-
rgba()中的 alpha 值范围是0（全透）到1（不透），常用0.7–0.95平衡透感与可读性 - 十六进制色如
#f0f0f0不能直接加透明度，必须先转成 RGB 或直接用hsla() - 如果表格有
border-collapse: collapse，<tr>上设background-color会被<td>覆盖，建议统一设在<td>或用background-clip: padding-box控制渲染区域
兼容性和降级处理（真要支持 IE8？）
现代项目基本不用管 IE8，但若必须兼容，rgba() 在 IE8 及以下不支持，会直接忽略该声明，变成无背景色（即透明）。这时可以加一条 filter 回退：
table {
background-color: rgba(255, 255, 255, 0.9);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e6ffffff,endColorstr=#e6ffffff);
}
不过注意：
-
filter是 IE 专属，Chrome/Firefox 会忽略，不影响现代浏览器 - 这个
gradient写法本质是模拟单色半透，#e6ffffff中前两位e6是十六进制 alpha（≈0.9），后面是白色 - 如果项目已放弃 IE，这条完全可以删掉——省代码、少 bug、加载快
真正容易被忽略的是：表格默认有 border 和 padding，它们会干扰透明背景的视觉连贯性。比如 <td> 之间留白、边框颜色没调成同 alpha 的 rgba，都会让“半透”看起来断断续续。动手前先清掉默认边距，再统一配色节奏。
