table或td用background-color:rgba()可实现背景透明而文字清晰，因rgba()仅作用于背景色；opacity会使整个表格及内容变透明，导致文字模糊。
table 或 td 用 background-color: rgba() 最直接
想让表格背景透出下层内容、又不模糊文字，rgba() 是首选。它只改背景色的透明度，文字、边框、内部元素完全不受影响。
-
rgba(255, 255, 255, 0.1)是极淡白底，适合浅色图上提亮文字但不遮挡背景 -
rgba(0, 0, 0, 0.08)是微弱黑底，常用于深色背景上增强文字可读性 - 别写成
background: rgba(...) no-repeat这类复合写法——background会覆盖掉background-color的 alpha 行为，老版本 Safari 曾因此失效 - 如果表格用了
border-collapse: collapse，记得给td和th单独设background-color，否则table上设的rgba可能被边框“吃掉”
为什么不用 opacity？它会让文字也变虚
opacity: 0.7 看起来简单，但它作用于整个元素树：表格、所有单元格、文字、边框、甚至内嵌的图片都会一起变透明。这不是“背景半透明”，而是“整张表发灰”。
- 常见误用：
table { opacity: 0.6; background-color: #000; }→ 文字看不清，对比度崩坏 - 若真要全局降透（比如做遮罩层），请用独立的空
div覆盖在 table 外层，而不是直接套在 table 上 -
opacity在 IE9+ 兼容好，但语义错位——你要的是“背景透”，不是“整块糊”
IE8 及更早浏览器不支持 rgba() 怎么办？
现在绝大多数项目已无需兼容 IE8，但如果接手遗留系统，得加 fallback：用 PNG 透明背景图替代，或用 IE 滤镜（仅限旧版）。
- 推荐 fallback 方式：
background-color: #000; background-image: url(data:image/png;base64,iVBORw0KGgo...);（base64 编码的 1×1 半透黑图） - 避免用
filter: alpha(opacity=70)，它只对 IE ≤ 8 生效，且和现代 CSS 冲突，调试成本高 - 检查是否启用了 IE 兼容模式 —— 即使页面声明了
，企业内网仍可能强制触发旧渲染引擎
hsla() 适合需要动态换主题色的场景
如果你的表格要随主题切换（比如日/夜间模式），hsla() 比 rgba() 更易维护：调色相 h 就能换主色，透明度 a 和亮度 l 可保持不变。
- 示例：
background-color: hsla(210, 100%, 95%, 0.8);是带 80% 不透明度的浅蓝色底 - 夜间模式只需改
hsla(210, 100%, 15%, 0.8)，亮度降到 15%，其他参数不动 -
hsla()和rgba()浏览器支持度一致（Chrome 1+, Firefox 3+, Safari 3.1+, Edge 12+），无额外兼容风险
rgba() 的 td，背景透但字锐利；另一个用 opacity 的 table，整块泛灰、细节丢失。真正容易被忽略的，是表格边框合并时的渲染优先级——border-collapse 会悄悄覆盖背景透明设置，务必单独控制单元格层级。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
