给<table>加opacity可统一控制透明度，但会连子元素一起变透明；正确写法是opacity:0.5而非50%，且子元素无法通过设opacity:1恢复不透明。
直接给 <table> 加 opacity 就行，但要注意它会连文字、边框、子元素一起变透明
想让整个表格（包括里面所有 <tr>、<td>、文字、图片）统一变淡或半透，最直白的做法就是给 <table> 标签加 opacity。它不挑浏览器——IE9+、Chrome、Firefox、Safari 全支持。
常见错误是写成百分比：opacity: 50% 是无效的，CSS 只认 0～1 的小数；opacity: 0.5 才对。
-
<table style="opacity: 0.4;">...—— 内联写法，快速验证 -
table.my-table { opacity: 0.7; }—— 推荐用 class 控制，便于复用和覆盖 - 如果表格里有按钮或链接，
opacity: 0后它们仍能点（除非额外加pointer-events: none）
为什么设置了 opacity 却“看不出变化”？大概率是父容器背景盖住了
表格本身透明了，但如果它的父级（比如 <div> 或 <body>）有纯色背景，你看到的其实是那个背景，不是“透出去”的效果。
- 检查
<table>外层有没有background-color，尤其是<body>默认白色 - 用浏览器开发者工具（F12）选中
<table>，看 computed 样式里opacity是否被其他规则覆盖（比如更高优先级的!important） - 别在
<table>上同时设background-color和opacity：比如background-color: #fff; opacity: 0.3，结果是灰蒙蒙的白底+半透文字，不是你想要的“背景透出”感
用 opacity 时，子元素无法“恢复不透明”，这是 CSS 渲染机制决定的
这是最容易踩坑的地方：哪怕你在 <td> 里写 style="opacity: 1"，它也不会变回完全不透明——因为 opacity 在父元素上创建了层叠上下文，子元素的透明度是叠加计算的（0.5 × 1 = 0.5）。
立即学习“前端免费学习笔记（深入）”；
- 如果你需要“背景半透、文字清晰”，就别用
opacity，改用background-color: rgba(...)给<table>或<td>单独设背景 - 想让某一行突出显示（比如 hover 时文字变实），用
color或font-weight调整，而不是试图靠opacity拉回来 - 动画场景下，
opacity是 GPU 友好的属性，适合做淡入淡出；但若要精细控制各部分透明度，就得拆开用rgba()+color+border-color
旧版 IE 兼容问题现在基本不用操心，但得知道它曾经怎么烂
IE8 及更早版本不支持 opacity，当时得靠 filter: alpha(opacity=40)（40 表示 40% 不透明）。但现在（2026 年），主流项目已无需兼容 IE8/9，除非维护遗留系统。
- 如果真要兼容，得写两行：
opacity: 0.4; filter: alpha(opacity=40); -
filter方式会让文字发虚、锯齿明显，且无法和transform等属性共存 - 现代框架（React/Vue）或构建工具（Webpack/Vite）通常自带 autoprefixer，但不会自动补
filter，得手动加
opacity: 0.6，而是判断该不该用它——你要的是“整体雾化”，还是“背景朦胧而内容锐利”。选错方案，后面调样式的时间远超写代码的时间。 
