background-blend-mode在table/td上失效，主因是表格渲染机制导致多层背景被合并或忽略；必须用伪元素（如::before）承载一层背景，配合元素自身背景色，并将background-blend-mode写在该元素上才能生效。
background-blend-mode 为什么在 table 或 td 上完全没反应？
它根本不会生效——background-blend-mode 要求元素必须有「至少两个背景层」，且全部写在同一个 background 或 background-image 声明里。但表格单元格（td、th）默认继承 border-collapse: collapse 行为，加上浏览器对表格渲染的特殊处理，常导致背景层被合并、裁剪或忽略。
- 只写了
background-color: #eee—— 单层，无混合对象 -
background-image: url("dot.png"); background-color: #f0f;分两行写 —— 浏览器丢弃background-color，只剩一张图 - 父级
table设了border-spacing: 0或border-collapse: separate—— 可能打断背景连续性，让多层背景错位失效 - 用了
background: #fff url("noise.png")这类简写 —— 它等价于background-color+background-image，但部分旧版 Safari（≤15.3）不识别这种组合为“多层背景”
怎么写才能让表格单元格真正用上 background-blend-mode？
核心是绕过表格渲染陷阱：把混合逻辑从 td 移到它的伪元素上，或用 div 替代原生表格单元格结构。直接在 td 上硬塞多层背景，90% 场景会失败。
- ✅ 推荐方案：用
::before伪元素承载底纹图，td本体设纯色背景，再统一加background-blend-mode - 示例：
.blended-cell { position: relative; background-color: #f8f9fa; } .blended-cell::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url("grid-dot.png"); z-index: -1; } .blended-cell { background-blend-mode: multiply; } - ⚠️ 注意：
background-blend-mode必须写在同时拥有两个背景的元素上 —— 所以这里不能只写在::before，而要写在.blended-cell本身（它有background-color+::before的图层） - ❌ 避免在
table元素上直接设多层背景 —— 表格根元素的背景会被整个表体覆盖，混合区域不可控
哪些混合模式适合表格底纹场景？
表格底纹通常用于弱化视觉干扰、区分行列或增加质感，不是为了做强烈色彩冲击。选错模式会让文字可读性崩坏。
-
multiply：适合浅色底纹（如米白噪点）盖在灰白底色上，压暗边缘，增强纹理感；深色底纹+深底色会糊成一片 -
overlay：比multiply更中性，保留文字对比度，适合带灰阶的底纹图（如 10% 透明度的斜线），多数表格卡片首选 -
screen：慎用 —— 它提亮所有区域，可能让浅色文字发虚，仅在深底色+浅纹场景下有效（如藏青底+白色网点） - 别碰
difference或exclusion—— 渲染不稳定，Firefox 和 Safari 表现差异大，表格里极易出现断层或色块
响应式表格里 blend 模式容易崩的三个细节
表格在小屏折叠、列隐藏、滚动容器内时，background-blend-mode 的行为会突变，不是代码写错了，而是渲染上下文变了。
立即学习“前端免费学习笔记（深入）”；
- 滚动容器（如
overflow-x: auto）触发新合成层，可能导致伪元素背景被裁剪，混合区域变窄 —— 解决：给容器加will-change: transform或强制transform: translateZ(0) - 媒体查询里改了
background-size却没同步改background-position—— 两张背景错位，混合结果变成条纹或马赛克 - 用
vw/vmin做底纹图尺寸时，某些 Android WebView 对缩放后图像的 blend 计算异常 —— 降级方案：固定用px或rem，配合background-repeat: repeat
真正在表格里跑通 background-blend-mode 的关键，不是调参数，而是把混合逻辑从表格语义里抽出来——它本质是“一个盒子内部的多层背景”，而原生表格单元格从来就不是一个干净的盒子。
