直接给加opacity会使全部内容变透明，若只需背景透明而文字清晰，应改用background-color:rgba()。
直接给 <table> 加 <code>opacity 是最简单的方式，但它会让文字、边框、单元格内容全部变透明——如果你只想背景透而文字清晰，这条路就走偏了。
opacity 作用于整个表格及其所有子元素
当你对 <table> 设置 <code>opacity: 0.6，效果会传递到 <tr>、<code><td>、文字、内嵌图片甚至伪元素上。这不是“叠加”，而是渲染树层级的统一透明度处理。
<ul>
<li>子元素无法通过设置 <code>opacity: 1 恢复不透明——它会在父级透明度基础上再乘一次（比如父级 0.6 × 子级 1 = 0.6）
opacity: 0 的表格仍占据布局空间，鼠标悬停、点击事件默认仍可触发（需额外加 pointer-events: none 才禁用）filter: alpha(opacity=60)，但该写法已废弃且不推荐用于新项目为什么表格看起来“没变透明”？常见干扰项
即使写了 style="opacity: 0.4"，也可能毫无反应——问题往往不在 opacity 本身，而在层叠或结构干扰：
- 父容器（如
<div> 或 <code>）设置了强背景色，盖住了表格的半透明效果 - CSS 优先级更高的一条规则覆盖了你的 opacity，比如外部样式表里写了
table { opacity: 1 !important; } - 表格启用了
border-collapse: separate（默认值），导致border-spacing产生不可见间隙，视觉上割裂透明感；必须显式设border-collapse: collapse和border-spacing: 0 - 某些框架（如 Bootstrap）会给
table默认加背景色或边框，需检查 computed styles 确认最终生效值 - ✅ 正确做法：若只要背景透、文字不透，删掉
opacity，改用background-color: rgba(255, 255, 255, 0.7) - ❌ 错误组合：
background-color: #000; opacity: 0.5→ 黑底 + 半透明 = 灰黑底 + 半透明文字，整体对比度崩坏 - ⚠️ 注意 alpha 值是小数，不是百分比：
rgba(0,0,0,50)或opacity: 50%都无效，浏览器会忽略整条声明 - 如果该单元格有 hover 效果（比如
td:hover { background-color: #eee; }），opacity 会让 hover 色也变淡，削弱反馈感 - 当多个
<td> 透明度不同，相邻单元格因 alpha 叠加可能产生色差，尤其在浅色背景下明显 <li>移动端 Safari 对 table cell 的 opacity 渲染偶有闪烁，建议优先用 <code>rgba()控制背景，保持 opacity 全局一致
opacity 和 rgba() 混用时的典型错误
很多人试图“折中”：一边设 background-color: #fff，一边加 opacity: 0.7，结果文字也发灰。这不是 bug，是预期行为——opacity 不区分背景和内容。
表格单元格（td/th）单独设 opacity 的风险
给单个 <td> 加 <code>opacity 看似精细，但容易引发意外交互问题：
真正难的不是写对那行代码，而是判断“你到底想让什么透明”：是整个表格浮层（用 opacity），还是仅背景蒙版（用 rgba()），抑或需要响应式渐变遮罩（得靠伪元素 + opacity 分层）。选错起点，后面全要返工。
