mix-blend-mode: multiply 在 HTML 表格中必然失效，因表格渲染模型隐式创建堆叠上下文且单元格不参与层叠混合；应改用伪元素遮罩或 background-blend-mode，或彻底替换为 CSS Grid/Flex 语义化结构。
mix-blend-mode: multiply 在 HTML 表格中几乎必然失效——不是写法错，而是表格元素天然阻断混合路径。
为什么 <table> 里加 mix-blend-mode: multiply 没反应
表格的渲染模型（table formatting context）会隐式创建 stacking context，且 <tr>、<td> 默认不参与层叠混合：它们既不是“兄弟元素”也不是“与背景重叠的独立内容块”，而是被表格布局强约束的单元格容器。哪怕你给 <td> 加了 position: absolute，它仍受 table-layout 影响，无法真正脱离表格层叠流。
-
<table>自身不接受mix-blend-mode—— 它不是“内容层”，而是布局容器 -
<td>和它的背景色/图片不在同一混合层级：背景属于单元格自身，而mix-blend-mode只混合“内容”和“背后内容”，不混合自身背景 - 即使把
<img>放进<td>，也因父级<tr>或<table>触发隔离上下文（如默认的border-collapse行为或 UA 样式）而静默失效
想让表格区域变暗？改用 background-blend-mode 或伪元素遮罩
目标是“让表格内容看起来更暗”，本质是叠加一层深色遮罩——这不是混合问题，而是遮罩问题。直接绕过 mix-blend-mode 更可靠：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 给
<table>加position: relative，再用::before伪元素覆盖全表：.table-darken { position: relative; } .table-darken::before { content: ""; position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.2); z-index: 1; } - 若需保留图片纹理感，用
background-blend-mode: multiply配合多背景（但仅适用于<table>自身有background-image的场景）：table { background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("grid-bg.png"); background-blend-mode: multiply; } - 别试图在
<td>上设background-blend-mode：它只支持单个元素的多个 background 图层，而<td>很少同时定义图片 + 渐变背景
真要强行用 mix-blend-mode？必须脱离表格结构
如果设计稿明确要求“表格单元格与下方图层正片叠底”，唯一可行路径是放弃原生 <table>，改用 CSS Grid 或 Flex 模拟表格语义，并确保混合元素与背景处于同一 stacking context：
立即学习“前端免费学习笔记（深入）”；
- 用
<div role="table">替代<table>，每个 cell 是<div role="cell"> - 所有 cell 必须是兄弟元素，且父容器不能有
transform、filter、opacity < 1、isolation: isolate - 背景必须是独立的兄弟元素（比如一个
<div class="bg">），而不是父容器的 background - 每个 cell 内部放
<img>或纯色块，并设mix-blend-mode: multiply
最常被忽略的一点：表格不是“视觉层叠容器”，它是“布局约束容器”。想让它参与混合，就得先把它从表格语义里解放出来——否则所有 mix-blend-mode 尝试都是在对抗浏览器渲染引擎的底层逻辑。
