给 table 设 rgba 背景无效，必须为每个 td 和 th 显式设置 background-color: rgba() 才生效；tbody/tr 设置会被 td 默认白色覆盖；需用开发者工具确认最终生效样式，避免简写覆盖、十六进制透明度不兼容等问题。
直接给 td 或 th 设 background-color: rgba() 才真正生效
很多人试图给 table 标签加 background-color: rgba(0,0,0,0.1)，结果发现没效果——因为表格渲染模型中，table 元素本身不渲染背景层，实际起作用的是单元格。必须显式给每个 td 和 th 设置 background-color: rgba()，才能控制视觉层级。
常见错误现象：tbody 或 tr 上设了 rgba 背景，但被 td 默认继承的白色背景覆盖；某些 UI 框架（如 Ant Design 的 .ant-table-cell）还会注入默认背景色，直接盖掉你的设置。
- 务必用开发者工具检查 computed styles，确认最终生效的是哪个元素的
background-color - 如果用了
border-collapse: collapse，记得同时给th和td都设 rgba，否则表头和数据行透明度不一致 - 避免写
background: #fff这类简写，它会把之前声明的background-color: rgba()整条冲掉
rgba() 的 alpha 值不是越小越好，要匹配底层内容节奏
alpha 值为 0.05 和 0.15 在浅色背景图上可能看不出差别，但在深色渐变或纹理图上，0.1 就可能压住细节，0.2 又开始抢焦点。真正影响视觉层级的不是“设了透明”，而是 alpha 值是否与父容器背景形成呼吸感。
典型场景：表格浮在 background-image: linear-gradient(...) 上时，rgba(255,255,255,0.12) 往往比 0.1 更稳；若底层是纯色，则 0.08–0.18 是安全区间。
立即学习“前端免费学习笔记（深入）”；
- 文字颜色也要同步评估：深色文字配高 alpha（如 0.9）易读，浅色文字配低 alpha（如 0.05）可能根本看不清
- 别用十六进制色直接加透明度（比如
#fff8），不是所有浏览器都支持，老版本 Safari 会忽略 - 移动端 Retina 屏对低 alpha 更敏感，0.05 在 PC 上 barely visible，在 iPhone 上可能已显灰雾
复杂背景（图片/渐变）下，伪元素 + position: relative 是唯一可控方案
当表格需要叠加图片或线性渐变作为底纹，又不能让文字变淡时，rgba() 不够用——它只能控制单色背景。此时必须用伪元素在单元格底层画一层遮罩，再把文字压在上面。
核心代码结构：
td {
position: relative;
}
td::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1));
z-index: -1;
}
-
position: relative必须加在td上，否则::before会相对于body定位 -
content: ""不能省，否则伪元素不渲染 - 渐变层建议用同色系不同 alpha 的
rgba()，避免用opacity导致过渡也被削弱
嵌套表格或 overflow: hidden 容器里，透明容易被裁剪或失效
表格放在 div 中且该 div 设了 overflow: hidden，半透单元格边缘可能被硬裁掉，看起来像“缺角”；表格嵌套时，外层 table 的 background-color 会盖住内层 td 的 rgba 背景。
这不是 bug，是层叠上下文和渲染优先级导致的。现代浏览器对 table-layout: fixed 下的 td 背景渲染更保守，有时会跳过半透合成。
- 检查父容器是否意外设置了
background-color: #fff，哪怕 opacity 是 1，也会挡住底层 - 嵌套表格时，内层
table的background-color应设为transparent，而非留空 - 滚动容器中，
tbody的background-color建议统一设为rgba(255,255,255,0.95)，避免滚动时出现“白闪”割裂感
rgba()，而是判断哪一层该透、透多少、透了之后会不会暴露不该露的层叠关系。尤其在动效或响应式缩放时，alpha 值微调 0.02 就可能让整块区域失去平衡。 
