结论：表格背景透明用rgba()，整表变透用opacity；但要文字清晰、背景透出、视觉有层次，rgba()是唯一靠谱选择。
直接说结论：表格背景透明用 rgba()，整表变透用 opacity；但想文字清晰、背景透出、视觉有层次，rgba() 是唯一靠谱选择。
table 或 td 上直接写 opacity 会连文字一起变淡
很多人试过给 <table> 加 opacity: 0.7，结果发现文字也糊了，边框发虚，甚至嵌套的按钮点击区域都变难识别——这不是 bug，是 opacity 的设计逻辑：它作用于整个渲染层，子元素无法“逃开”。
- 哪怕你给
<td>里文字加color: black，也救不回被压低的对比度 - 如果表格里有 input、链接或 hover 效果，交互体验会明显下降
- IE9+ 支持
opacity，但旧版 Android WebView 对 transform + opacity 组合有重绘异常
用 background-color: rgba() 控制单元格背景透度
真正可控的方式，是把透明度“锁”在背景色里。只改 background-color，不影响文字、边框、内联元素的渲染层级。
-
td { background-color: rgba(255, 255, 255, 0.08); }—— 极淡白底，透出下层背景图但轻微提亮文字 -
th { background-color: rgba(0, 0, 0, 0.12); }—— 微弱黑底，增强表头可读性而不遮盖底图 - alpha 值为
0等价于transparent，但rgba()更灵活，能渐进调试（比如从0.05试到0.15） - 注意：IE8 及以下不支持
rgba()，如需兼容，得 fallback 到半透明 PNG 背景图
避免被 table 默认边框和 cellspacing “吃掉”透明效果
即使写了 rgba()，有时还是看不到预期透明感——大概率是表格默认样式在干扰。
立即学习“前端免费学习笔记（深入）”；
-
border-collapse: collapse必须设，否则cellspacing产生的间隙会显示父容器背景，破坏统一透感 - 去掉默认边框：
table, td, th { border: none; }，或统一用border: 1px solid rgba(0,0,0,0.08)保持轻量分隔 - 如果用了
table-layout: fixed，确保td宽度不因内容撑开导致背景色断层
复杂背景（如图片/渐变）下怎么让表格内容不“融”进去
当表格放在 banner 图或线性渐变上时，纯 rgba() 背景可能仍显单薄。这时需要叠加一层可控遮罩。
- 给
<table>外层容器加伪元素：.table-container::before设置background-image+opacity，再用z-index: -1 - 或者用
background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(...)实现双层背景叠加 - 关键点：所有透明控制必须落在背景层，内容层（
td文字、图标）保持opacity: 1和高对比度颜色
真正难的不是写对一行 rgba()，而是判断哪一层该透、透多少、底下是什么——背景图分辨率、字号大小、环境光条件，都会影响那个“刚好看得清又不抢戏”的 alpha 值。调的时候别只看屏幕，换个亮度环境再扫一眼。
