应避免用opacity设置table透明度，因其会使文字发灰；正确做法是用background-color: rgba()仅控制背景透明，或用::before伪元素隔离复杂背景。
直接给 table 设 opacity 会让文字也发灰，这不是“背景透明”，而是整张表连同所有单元格内容一起变淡——除非你真需要这种效果，否则别这么干。
table 设置 background-color: rgba() 是最常用且安全的做法
只让表格背景透、文字保持清晰，就该用 rgba() 控制背景色本身，而不是动整个元素的透明度。
-
background-color: rgba(255, 255, 255, 0.7)表示白色背景带 70% 不透明度，td和th里的文字完全不受影响 - 如果表格用了
border-collapse: collapse，记得同时给th、td单独设background-color: rgba(...)，否则边框交界处可能漏出底层背景 - 避免混用：
background-color: #fff; opacity: 0.8—— 这等于把文字也压暗了，和你要的“背景透、字清楚”目标相反
opacity: 0.6 导致表格文字看不清？检查祖先元素是否也设了 opacity
哪怕你只给 table 写了 opacity: 0.6，如果它套在某个 div 里，而那个 div 本身有 opacity: 0.8，那最终文字会叠乘变暗（0.6 × 0.8 = 0.48），而且子元素无法用 opacity: 1 拉回来。
- CSS 的
opacity不继承，但会逐层向下“传染”渲染效果 - 排查时打开浏览器开发者工具，选中文字元素，看 computed 样式里
opacity是否被父级间接影响 - 真正想保文字清晰，就彻底放弃
opacity，改用rgba()或伪元素方案
需要背景图 + 透明度？用 ::before 伪元素隔离图层
纯色背景用 rgba() 就够了；但要是背景是图片，又想调透明度还不影响文字，就得把图层抽出来单独控制。
- 给
table容器（比如外层div）设position: relative - 用
::before绘制一层绝对定位的背景图，并通过opacity或background-color: rgba()叠加蒙版 - 关键点：
z-index: -1确保伪元素在表格下方，且不干扰表格自身结构和可访问性 - 不要给
table本身加opacity，否则又回到文字发灰的老问题
真正难的不是怎么写那行 rgba()，而是意识到：只要文字不能跟着变淡，opacity 就不该出现在表格或其父容器上——哪怕只写了一次，也可能在 DOM 某个看不见的层级悄悄生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
