不推荐给或直接加opacity，因其会使文字和子元素变淡、干扰z-index；应使用rgba()设置background-color实现背景半透明，文字保持清晰；边框半透明需配合background-clip: padding-box；整表背景图半透明宜用伪元素叠加rgba色块。
直接用 opacity 会让文字也变淡，不推荐
给 <td> 或 <code><th> 直接加 <code>opacity: 0.6 确实能让单元格“看起来”半透明，但副作用明显：里面的所有文字、图片、子元素全跟着变淡，可读性骤降。更麻烦的是，opacity 会强制创建新的层叠上下文，可能干扰 z-index 布局，尤其在带下拉菜单或弹窗的表格里容易错位。
正确做法：用 rgba() 设置 background-color
只让背景色半透明，文字保持清晰，这才是多数场景的真实需求。关键就是把颜色写成 rgba() 格式：
-
background-color: rgba(255, 255, 255, 0.2)→ 白色背景，20% 不透明（即 80% 透明） -
background-color: rgba(0, 120, 200, 0.4)→ 蓝色背景，40% 不透明 - alpha 值必须是 0～1 的小数，不是百分比数字（别写成
rgba(0,0,0,40)） - IE9+ 和所有现代浏览器都支持，基本不用考虑兼容 fallback
边框半透明要加 background-clip: padding-box
如果表格单元格同时设置了 border 和 background-color: rgba(...)，你会发现边框“不透明”——其实是背景色默认延伸到了边框区域，盖住了半透边框。解决方法很简单：
- 在同一样式块里加上
background-clip: padding-box - 或者直接用
border: 1px solid rgba(100, 150, 255, 0.7)+background-clip: padding-box - 不加这句，哪怕边框用了
rgba()，你也看不到效果
整张表背景图半透明？别动 opacity，用伪元素
如果目标是让表格背后的图片（比如 background-image）半透明，而文字和边框完全清晰，那就不能碰 opacity。正确姿势是：
- 给
<table> 加 <code>position: relative - 用
::before伪元素覆盖一层rgba()色块 - 控制伪元素的
z-index在背景图之上、内容之下 - 这样背景图被“蒙”了一层半透色，但单元格文字、边框毫发无损
真正容易被忽略的是：透明度不是显示开关。哪怕 opacity: 0 或 rgba(..., 0)，元素依然占布局空间、能响应点击、会被屏幕阅读器读出——它只是“看不见”，不是“不存在”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
