Outlook深色模式下表格linear-gradient渐变背景失效的兼容方案咨询

核心思路 #

Outlook Windows桌面版对background-image（包括渐变）的支持度极低，且深色模式下仅会自动调整background-color属性的亮度，不会处理背景图/渐变。你可以通过拆分表格结构，用独立单元格的纯色背景模拟部分区域背景效果，完全匹配原有视觉效果，同时兼容Outlook深色模式的自动适配逻辑。

具体实现代码 #

<table role="presentation" bgcolor="#ffffff" style="width: 100%; border-collapse: collapse; border: 0; border-spacing: 0;">
  <tr>
    <td align="center" style="padding:0; height: 442.5px;" width="auto">
      <table role="presentation" style="width:100%;border-collapse:collapse;">
        <!-- 上半部分：对应原渐变覆盖的70%区域，用纯色背景 -->
        <tr>
          <td style="padding: 0;background-color:#D7DDDA;height:309.75px;" align="center">
            <p width="639.4666666666667" style="padding: 26.6pt 0 0 0; width: 479.6pt; font-family: 'FiraGo Light', Georgia, 'Times New Roman', Times, serif; font-style: normal; font-size: 16pt; line-height: 24pt; mso-line-height-rule:exactly; color: #3a3735;">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
          </td>
        </tr>
        <!-- 下半部分：对应原无渐变的30%区域，用白色背景 -->
        <tr>
          <td style="padding: 0;background-color:#ffffff;height:132.75px;" align="center">
            <img src="https://dummyimage.com/600x400/000/fff" alt="Rooms Hotel Kokhta Camping" width="639.4666666666667" style="height: auto; padding: 23.4pt 0 0 0; margin: 0; display: block;">
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

适配注意事项 #

• 如果需要实现宽度方向的部分背景，同理可把一行拆分为左右两个独立td，分别设置对应背景色即可
• 所有单元格高度设置和原设计保持严格一致，避免Outlook渲染时出现错位
• 保留原代码中mso-前缀的专属属性，确保文字排版在Outlook中正常显示

内容的提问来源于stack exchange，提问作者mac125