mix-blend-mode 在 table 元素上基本无效，因表格默认不参与常规层叠上下文构建，且 table、tr、td 的 display 模型对混合支持极差；Chrome/Firefox 静默忽略，Safari 可能渲染异常；需将要混合的内容抽离为同级定位元素覆盖表格背景，或改用 background-blend-mode + 伪元素模拟。
mix-blend-mode 在 table 元素上基本无效
直接给 <table>、<tr> 或 <td> 设置 mix-blend-mode 几乎不会产生预期混合效果。这不是浏览器 bug，而是 CSS 渲染模型限制：表格元素（尤其是 table、tr）默认不参与常规层叠上下文构建，且其内部 display 模型（如 table-cell）对 mix-blend-mode 的支持极差 —— Chrome/Firefox 会静默忽略该声明，Safari 则可能触发渲染异常。
想让表格内容与背景混合，必须绕过 table 结构本身
真正可行的做法是把“要混合的内容”从表格语义中抽离出来，用定位覆盖在表格上方，同时确保底层有可混合对象：
- 把表格设为纯视觉容器（
background-color或background-image），不设任何干扰属性（禁用opacity、filter、isolation） - 将需要混合的文字/图标用
<div>或<span>提出，设position: absolute盖在对应单元格位置 - 这些浮动元素必须和表格同级（或至少共用一个无干扰的父容器），不能嵌套在
<td>内部 - 给浮动元素加
mix-blend-mode: overlay等值，它才会和表格背景真正运算
示例结构：
<div class="table-wrapper"> <table><tr><td>data</td></tr></table> <div class="blended-label" style="position: absolute; top: 20px; left: 30px;">Label</div> </div>
其中 .table-wrapper 须满足：background: linear-gradient(...)，且无 opacity、transform 等隐式创建层叠上下文的属性。
立即学习“前端免费学习笔记（深入）”；
table-cell 里强行用 mix-blend-mode 的常见翻车点
即使你给 <td> 加了 position: relative 并在里面放一个 position: absolute 子元素，也大概率失败，原因包括：
-
<td>默认display: table-cell，其 stacking context 行为特殊，常截断混合链 - 表格自动计算的
border-collapse、box-sizing会影响绝对定位坐标，导致视觉错位 - 移动端 Safari 对
table-cell内mix-blend-mode支持为 0（iOS 16.5 前完全不识别） - 如果表格父容器用了
overflow: hidden，浮动元素可能被裁剪，混合区域丢失
替代方案：用 background-blend-mode + 伪元素模拟“表格背景混合”
如果目标只是让表格单元格看起来像和渐变/纹理背景融合，更稳的做法是放弃 mix-blend-mode，改用 background-blend-mode 配合伪元素：
- 给
<td>设两层背景：一层是底色或纹理图，一层是半透明遮罩（如linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1))） - 用逗号分隔写进单个
background声明，再加background-blend-mode: overlay - 文字颜色保持纯黑或纯白，靠背景混合提升对比度，而非依赖元素级混合
这样既规避了表格 DOM 层叠限制，又能在所有现代浏览器稳定生效。
真正容易被忽略的是：表格不是普通块级容器，它的渲染流程绕过了标准 stacking context 构建路径。哪怕结构看起来“重叠”，混合也可能在合成阶段就被跳过。动手前先确认你是在控制像素叠加，而不是在调试浏览器的表格布局引擎。
