正确做法是用 rgba() 设置 background-color 实现透明背景而不影响文字，避免使用 opacity 导致整元素及子元素变淡；需注意 IE8 兼容性、border 处理及多背景混合问题。
表格背景要透明，但文字不能跟着变淡——直接用 opacity 就踩坑了。正确做法是只让背景色带透明度，文字、边框、子元素保持原样，核心就是用 rgba()。
table 或 td 的 background-color 必须用 rgba()，不是 opacity
很多人一上来给 <table> 加 opacity: 0.7，结果整张表连文字都发虚，边框也糊了。这是因为 opacity 是作用于整个元素及其所有后代的，没法“只透背景”。rgba() 则不同，它只是给颜色加 alpha 通道，只影响你指定的那个属性（比如 background-color），其他一切照常。
-
background-color: rgba(255, 255, 255, 0.1)→ 极淡白底，透出下层背景图或页面底色 -
background-color: rgba(0, 0, 0, 0.08)→ 微弱黑底，提升文字可读性又不遮挡背景 - 别写成
rgb(0,0,0,0.5)—— 缺少a就是无效语法，浏览器会忽略整条声明 - 如果表格有
border-collapse: collapse，记得给td和th都设background-color，否则边框缝隙处可能漏出底层内容
IE8 及更老浏览器不支持 rgba()，得备选
现在绝大多数项目已不用兼容 IE8，但如果真要支持，rgba() 会直接失效，背景变成纯白或继承色。这时不能靠 JS 检测后补样式，太重；简单有效的 fallback 是用半透明 PNG 作为 background-image：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 生成一张 1×1 像素、alpha=128 的 PNG（比如黑底 50% 透明），存为
bg-50.png - CSS 里写：
background: url('bg-50.png') repeat; - 现代浏览器会优先使用
background-color: rgba(...)，覆盖掉 PNG；老 IE 只认 PNG - 注意：不要用
filter: alpha(opacity=50)，它在 IE8 下对td渲染不稳定，容易错位或闪烁
透明背景遇上 border 或 hover 效果，容易穿帮
当 td 背景是 rgba() 时，如果还设置了 border，尤其是 border-collapse: separate 模式下，border 本身不透明，会和半透背景形成视觉割裂。hover 时若只改背景色不改 border，也会显得突兀。
立即学习“前端免费学习笔记（深入）”；
- 统一处理：hover 时同时改
background-color和border-color，比如都用同色系不同 alpha 值 - 更稳妥：把 border 也做成半透，例如
border: 1px solid rgba(0,0,0,0.15) - 如果用了
border-collapse: collapse，注意相邻单元格的 border 会合并，此时单个td的 border 设置可能被覆盖，建议统一控制table的border - 避免在
td上叠加多个背景（比如background-image+background-color: rgba()），旧版 Safari 对混合背景的 alpha 处理不一致
真正难的不是写那行 rgba()，而是想清楚「哪些东西必须跟着透、哪些绝对不能透」——表格里往往有文字、链接、图标、甚至嵌套的按钮，它们的层级和渲染行为比普通 div 更敏感。一个 z-index 不够、一个 position 错位，就可能让透明背景下的内容打架。动手前先在 DevTools 里关掉所有样式，一层层加回来验证，比猜强得多。
