mix-blend-mode: multiply 在 html 表格中必然失效，因表格渲染模型隐式创建堆叠上下文且单元格不参与层叠混合；应改用伪元素遮罩或 background-blend-mode，或彻底替换为 css grid/flex 语义化结构。

mix-blend-mode: multiply 在 HTML 表格中几乎必然失效——不是写法错，而是表格元素天然阻断混合路径。

为什么 <table> 里加 <code>mix-blend-mode: multiply 没反应

表格的渲染模型（table formatting context）会隐式创建 stacking context，且 <tr>、<code><td> 默认不参与层叠混合：它们既不是“兄弟元素”也不是“与背景重叠的独立内容块”，而是被表格布局强约束的单元格容器。哪怕你给 <code><td> 加了 <code>position: absolute，它仍受 table-layout 影响，无法真正脱离表格层叠流。

• <table> 自身不接受 <code>mix-blend-mode —— 它不是“内容层”，而是布局容器
• <td> 和它的背景色/图片不在同一混合层级：背景属于单元格自身，而 <code>mix-blend-mode 只混合“内容”和“背后内容”，不混合自身背景
• 即使把 <img> 放进 <td>，也因父级 <code><tr> 或 <code><table> 触发隔离上下文（如默认的 <code>border-collapse 行为或 UA 样式）而静默失效

  想让表格区域变暗？改用 background-blend-mode 或伪元素遮罩

  目标是“让表格内容看起来更暗”，本质是叠加一层深色遮罩——这不是混合问题，而是遮罩问题。直接绕过 mix-blend-mode 更可靠：

  

  Article To Html

  文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

  下载
  • 给 <table> 加 <code>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> 自身有 <code>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> 上设 <code>background-blend-mode：它只支持单个元素的多个 background 图层，而 <td> 很少同时定义图片 + 渐变背景 <h3>真要强行用 <code>mix-blend-mode？必须脱离表格结构

如果设计稿明确要求“表格单元格与下方图层正片叠底”，唯一可行路径是放弃原生 <table>，改用 CSS Grid 或 Flex 模拟表格语义，并确保混合元素与背景处于同一 stacking context： <ul><li>用 <code><div role="table"> 替代 <code><table>，每个 cell 是 <code><div role="cell"> <li>所有 cell 必须是兄弟元素，且父容器不能有 <code>transform、filter、opacity 、<code>isolation: isolate

背景必须是独立的兄弟元素（比如一个 <div class="bg">），而不是父容器的 background <li>每个 cell 内部放 <code><img> 或纯色块，并设 mix-blend-mode: multiply

最常被忽略的一点：表格不是“视觉层叠容器”，它是“布局约束容器”。想让它参与混合，就得先把它从表格语义里解放出来——否则所有 mix-blend-mode 尝试都是在对抗浏览器渲染引擎的底层逻辑。