最安全做法是直接给td/th设background-color:rgba(0,0,0,0.1)，仅背景透明而文字清晰；禁用opacity因它会使所有子元素发虚；旧ie需fallback；复杂背景用伪元素+position:relative实现分层透明。
用 background-color: rgba() 控制表格单元格背景透明度
直接给 td 或 th 设置 background-color: rgba(0, 0, 0, 0.1) 是最常用、最安全的做法。它只让背景变透，文字、边框、内边距内容完全不受影响。
常见错误是把 opacity 加在 table 或 tr 上——结果整行文字也发虚，可读性暴跌。
-
rgba()的第四个参数必须是 0–1 的小数，不是百分比（别写成0.3%或30） - 如果表格有默认边框或
border-collapse: collapse，透明背景可能被边框“盖住”，建议先统一清掉边框再调背景 - IE8 及更早版本不支持
rgba()，若需兼容，得 fallback 到半透明 PNG 背景图或filter: alpha(opacity=10)
为什么不用 opacity 给整个 table 设透明度？
因为 opacity: 0.7 会把 table 里所有东西——文字、边框、子元素——一起压暗，根本达不到“背景透、字清楚”的设计意图。
典型场景比如：带背景图的页面上放一个信息卡片表格，你只想让它像一层薄纱盖在图上，而不是把字也变模糊。
-
opacity是继承性属性，子元素无法通过设置opacity: 1挽回清晰度 - 即使只给
td加opacity，也会连带文字变淡，和rgba()的局部控制效果完全不同 - 某些旧版 Safari 对
tr上的opacity渲染异常，容易出现错位或闪烁
复杂背景（如图片+渐变）下怎么保持文字不透明？
当表格背景需要叠加图片或线性渐变时，rgba() 不够用，得用伪元素方案。
核心思路：用 ::before 在单元格底层画一层带透明度的遮罩，再用 z-index: -1 压到文字下面。
- 必须给
td加position: relative，否则伪元素定位失效 -
content: ""不能省，否则伪元素不渲染 - 渐变层建议用
background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2))，避免用opacity导致渐变过渡也被削弱
表格嵌套或固定布局时 rgba() 容易失效的点
不是 rgba() 本身有问题，而是表格渲染模型会“吃掉”部分透明效果。
比如设置了 table-layout: fixed 后，某些浏览器对 td 的背景渲染优先级变低；或者父容器用了 overflow: hidden，把半透边缘裁掉了。
- 检查是否被
background简写覆盖：如果写了background: #fff，它会把之前的background-color: rgba()冲掉 - 避免在
table上同时设background和td的background-color，层级冲突会导致透明度不可控 - 移动端 Safari 对
td的rgba()支持稳定，但若配合transform动画，偶尔会闪白，加backface-visibility: hidden可缓解
rgba() 必须作用于 background-color 这个具体属性，而不是随便挂个透明值上去。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
