应使用 background-color: rgba() 实现单元格背景半透明，避免 opacity 导致文字变淡、可访问性下降；rgba() 仅影响背景色，不干扰文字与边框，且需注意父级背景、border-collapse 和选择器权重等干扰因素。
直接用 background-color: rgba() 设置 td 或 th，别碰 opacity —— 后者会让文字一起发灰，不是“背景半透明”，是整张表被压暗。
为什么 opacity 不能用于单元格背景半透明
给 td 写 opacity: 0.7，结果是：文字变淡、边框变虚、hover 效果弱、可访问性下降。这不是 bug，是浏览器渲染规则——opacity 会创建新层叠上下文，并向下乘性传递，子元素无法靠 opacity: 1 拉回来。
-
td { opacity: 0.6; color: black; }→ 文字实际对比度 ≈ 60%，在浅色背景上可能看不清 - 若父
tr或tbody也设了opacity，效果还会叠加（比如 0.6 × 0.8 = 0.48） -
opacity: 0的单元格仍响应点击、键盘焦点，但用户根本看不出哪能点
rgba() 设置单元格背景的实操要点
rgba() 把透明度锁死在背景色里，文字、边框、内嵌元素全不受影响，是最稳的方案。
- 写法示例：
td { background-color: rgba(255, 255, 255, 0.08); }（极淡白底，透出下层背景图） - alpha 值必须是 0–1 的小数，
rgba(0,0,0,50)或rgba(0,0,0,50%)无效，整条声明会被浏览器忽略 - 想让
th和td透明度不同？可以分开写：th { background-color: rgba(0, 0, 0, 0.12); } - IE8 及以下不支持
rgba()，如需兼容，得 fallback 到半透明 PNG 背景图：background-image: url(white-10.png);
为什么写了 rgba() 还看不到半透明效果
常见干扰项比代码本身更难排查——真正“透不出来”，往往不是没写对，而是被默认样式或父级背景盖住了。
-
table或tbody自带背景色（比如某些 UI 框架设了background-color: #fff），子td再透明也没用 - 没清
border-collapse：默认separate+border-spacing会在单元格间留缝，露出父容器背景，视觉割裂 - 边框干扰：如果用了
border: 1px solid #ccc，但没加background-clip: padding-box，背景色会溢出覆盖边框，看起来像“边框不透” - 选择器权重被覆盖：外部样式表里一条
table tr td { background: #f9f9f9 !important; }会直接干掉你的rgba()
需要背景图+半透明遮罩时怎么办
纯色背景用 rgba() 就够了；但要是表格放在 banner 图、视频或渐变上，就得把背景图和遮罩分层控制。
- 给表格外层容器（比如
div.table-container）设position: relative - 用
::before伪元素画背景：.table-container::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05)), url(/bg.jpg); z-index: -1; } -
table本身保持background-color: transparent或轻量rgba()，确保内容层不受干扰 - 绝对不要给
table本身加opacity，否则又回到文字糊掉的老问题
最容易被忽略的，永远是那个没显式声明、却默默撑起白色背景的 tbody，或者框架注入的一行重置样式。调透明度前，先打开开发者工具，逐层检查 computed styles 里的 background-color 实际值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
