表格加了mix-blend-mode会混到body背景上，是因为table默认display: table不创建层叠上下文，混合向下穿透至body；必须给table加position: relative和isolation: isolate（含-webkit前缀）才能限制混合范围。
为什么表格加了 mix-blend-mode 会混到 body 背景上？
因为 默认是 display: table，它不自动创建层叠上下文；一旦你给某个 或 加了 mix-blend-mode: multiply，混合会向下穿透：先和 背景混，再和 背景混，最后甚至和
isolation: isolate 必须加在 上，且要满足定位条件直接写 table { isolation: isolate; } 是无效的，除非它已满足块级或定位前提：
默认 display 是 table，不是 block，也不响应 z-index，所以 isolation 声明会被浏览器静默忽略
- 必须显式设为
display: block 或加 position: relative（推荐后者，保留表格语义布局）
- 别加在
或 上——isolation 对 inline/table-cell 元素无效
- 前缀仍需保留：
-webkit-isolation: isolate，Safari 15.3 及更早版本不认原生值
实操写法与常见失效排查
正确写法示例：
table.blend-table {
position: relative;
-webkit-isolation: isolate;
isolation: isolate;
}
加完后检查是否生效：
- 打开 Chrome DevTools → 右键该
→ «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，它只在你把它加对位置、配对属性时才起效。
| |
| |
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
