不能用opacity实现隔行变色的“透明感”，因其会使文字发灰、边框虚化、交互失灵；应使用background-color: rgba()分别设置tr:nth-child(even/odd)背景色，精准控制行背景透度且保持内容清晰。
别用 opacity 实现隔行变色的“透明感”——它会让文字发灰、边框虚化、交互失灵；真正可控的方式是给 tr:nth-child(even) 和 tr:nth-child(odd) 分别设 background-color: rgba()。
为什么不能对 tr 直接用 opacity 做隔行效果
很多人试过这样写：
tr:nth-child(even) { opacity: 0.85; }
tr:nth-child(odd) { opacity: 1; }
结果发现偶数行的文字对比度明显下降，hover 按钮变难点击，甚至表头也跟着变淡。这是因为：
-
opacity作用于整行及其所有子元素（td、文字、图标、input），无法只调背景 - 子元素设
opacity: 1无效——它会在父级透明度基础上再乘一次（0.85 × 1 = 0.85） - 若表格嵌在带背景的容器里，叠加后视觉层次混乱，尤其在深色/图片背景下更难读
rgba() 是唯一能精准控制“行背景透度”的方式
把透明度锁进背景色里，文字、边框、内容保持原样清晰：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
tr:nth-child(even) { background-color: rgba(245, 245, 245, 0.3); }
tr:nth-child(odd) { background-color: rgba(255, 255, 255, 0.92); }
关键点：
- alpha 值必须是小数（
0.3），不是百分比（30%）或整数（30） - 两行的 alpha 差值建议控制在 0.2–0.3 之间，太小看不出区别，太大破坏统一感
- 如果表格有默认边框或
border-collapse: separate，必须同步加：table { border-collapse: collapse; border-spacing: 0; }，否则间隙会漏出底层背景，破坏交替效果
遇到背景图或渐变时怎么保文字可读
纯色背景用 rgba() 就够了；但若表格放在 banner 图、线性渐变上，直接设低 alpha 的白色背景可能仍显单薄：
- 优先给
tr加轻微遮罩色，比如rgba(0, 0, 0, 0.02)（黑底微蒙）或rgba(255, 255, 255, 0.04)（白底提亮） - 避免用
background-image+opacity组合——这又回到整行变灰的老问题 - 真要叠加复杂背景，应把图层抽到外层容器的
::before伪元素中，并用z-index: -1隔离，tr层只管background-color: rgba()
容易被忽略的继承干扰项
即使你写了正确的 rgba()，也可能看不到交替透明效果，常见原因：
-
tbody或table自带背景色（如 Bootstrap 默认设background-color: #fff），会盖住tr的背景 - 某条更高权重的 CSS 规则覆盖了你的
nth-child，比如table tr { background: #f8f9fa; } - 用了
border-collapse: separate且没清border-spacing，单元格间缝隙显示父背景，形成“断层感”
最稳的排查顺序：打开开发者工具 → 选中某行 → 看 computed styles 里 background-color 最终生效值，再逐层往上查 table、tbody、外层容器的背景声明。
