不能用 opacity 给表格设透明背景，因为它会使文字、边框等所有子元素一同变淡，降低可读性；应使用 background-color: rgba() 单独控制背景透明度，文字和边框保持不透明。
直接用 background-color: rgba() 给 <table> 或其 <code><tbody>/<code><tr> 设置背景色，就能实现背景半透明、文字不透明的效果。别用 <code>opacity，它会让表格里所有文字和边框一起变淡，可读性崩掉。
为什么不能用 opacity 给表格设透明背景
opacity 作用于整个元素及其所有子节点——包括 <td> 里的文字、内边距、边框线。哪怕你只想要“背景透一点”，<code>opacity: 0.7 也会让字体发虚、边框变细、对齐错位。尤其在深色背景下，文字可能直接看不清。
常见错误现象：<table style="opacity: 0.6"> 后发现表格内容像蒙了层灰，导出 PDF 或截图时文字边缘糊成一片；响应式缩放后透明叠加更难读。
<ul>
<li>它无法单独控制背景层，纯属“暴力降透明度”</li>
<li>继承性太强：子元素没法通过 <code>opacity: 1 拉回来（opacity 不叠加，但会嵌套衰减）
transform、filter 一起用时容易触发额外图层合成，性能略差
rgba() 设置表格背景的正确写法
把 background-color 写在 <table>、<code><tr> 或 <code><td> 上，用 <code>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> 上设 <code>background-color会被<td> 覆盖，建议统一设在 <code><td> 或用 <code>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，都会让“半透”看起来断断续续。动手前先清掉默认边距，再统一配色节奏。</td> -
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
