rgba背景比纯色更柔和，因其alpha通道使行背景与父容器底色自然混合；推荐用rgba(255,255,255,0.4/0.7/0.9)实现隔行变色+悬停过渡，并配合border-collapse:collapse提升视觉一致性。
直接用 background-color: #f0f0f0 隔行变色确实显得呆板。换成 rgba() 加半透明白色或灰色背景，能让颜色自然叠加在父容器底色上，视觉更柔和、层次更丰富。
为什么 rgba 比纯色更柔和？
因为 rgba 中的 alpha 通道（透明度）让行背景不再“盖住”底层，而是与表格整体背景混合。比如表格本身有浅灰边框或微渐变底色，rgba 背景会自动融合，避免生硬切割感。
怎么写才不翻车？
- 优先用
rgba(255, 255, 255, 0.6)这类白+透明组合——适配深色/浅色主题都安全，不会反差过大 - 避免用深色 + 高透明度（如
rgba(0,0,0,0.05)），容易看不清文字，尤其小字号时 - 搭配
transition: background-color 0.2s，鼠标悬停时颜色过渡更顺滑
实用代码示例
不用 JS，纯 CSS 就能搞定：
table tr:nth-child(odd) {
background-color: rgba(255, 255, 255, 0.4);
}
table tr:nth-child(even) {
background-color: rgba(255, 255, 255, 0.7);
}
table tr:hover {
background-color: rgba(255, 255, 255, 0.9) !important;
}
如果表格本身有背景（比如 background: #f9f9f9），这里的 rgba 会自然叠加上去，形成细腻明暗节奏。
立即学习“前端免费学习笔记（深入）”；
小技巧：配合 border-collapse 更干净
加一句 border-collapse: collapse 到 table 上，再给 tr 设 rgba 背景，能避免双线缝隙导致的色块断裂感。边框用 1px solid rgba(0,0,0,0.05) 也更协调。
基本上就这些——不复杂但容易忽略。
