表格加了mix-blend-mode会混到body背景上，是因为table默认display: table不创建层叠上下文，混合向下穿透至body；必须给table加position: relative和isolation: isolate（含-webkit前缀）才能限制混合范围。
为什么表格加了 mix-blend-mode 会混到 body 背景上？
因为 <table> 默认是 display: table，它不自动创建层叠上下文；一旦你给某个 <td> 或 <th> 加了 mix-blend-mode: multiply，混合会向下穿透：先和 <tr> 背景混，再和 <table> 背景混，最后甚至和 <body> 的浅灰背景一起算颜色——这不是 bug，是默认层叠行为。
isolation: isolate 必须加在 <table> 上，且要满足定位条件
直接写 table { isolation: isolate; } 是无效的，除非它已满足块级或定位前提：
-
<table>默认 display 是table，不是block，也不响应z-index，所以isolation声明会被浏览器静默忽略 - 必须显式设为
display: block或加position: relative（推荐后者，保留表格语义布局） - 别加在
<td>或<th>上——isolation对 inline/table-cell 元素无效 - 前缀仍需保留：
-webkit-isolation: isolate，Safari 15.3 及更早版本不认原生值
实操写法与常见失效排查
正确写法示例：
table.blend-table {
position: relative;
-webkit-isolation: isolate;
isolation: isolate;
}
加完后检查是否生效：
立即学习“前端免费学习笔记（深入）”；
- 打开 Chrome DevTools → 右键该
<table>→ «Show layers» → 确认显示 “Stacking Context Root” - 若没出现，说明
position没生效（比如父容器有transform或opacity: 0.99，提前建了嵌套上下文） - 别用
isolation: true或isolation: on——只有isolate是合法值 - 如果表格本身要浮在弹窗或导航栏之上，额外加
z-index: 100，否则隔离块仍在底层“洼地”里混合
替代方案对比：为什么不用 opacity: 0.99 或 transform: translateZ(0)？
它们确实也能创建层叠上下文，但副作用明显：
-
opacity: 0.99让整个表格轻微变透明，影响可访问性，且子元素继承该透明度 -
transform: translateZ(0)强制 GPU 合成，在 Safari 中易引发字体发虚、滚动卡顿，还可能和will-change冲突 -
isolation: isolate是零副作用声明——不改透明度、不触发布局重排、不干扰字体渲染
真正容易被忽略的是：表格结构本身不构成层叠上下文边界，isolation 不是贴上就灵的 magic class，它只在你把它加对位置、配对属性时才起效。
