在桌子上设置线性渐变，这将在前景的黑暗方案上改变颜色答案

【问题标题】：Setting a linear-gradient on the table that will change color on the dark scheme of outlook在桌子上设置线性渐变，这将在前景的黑暗方案上改变颜色
【发布时间】：2021-10-26 06:09:18
【问题描述】：

我正在尝试设置一个纯色背景，以覆盖第一个单元格和第二个单元格的某些部分。

不幸的是，在 Outlook 电子邮件客户端的深色方案上对其进行了测试后，它无法使背景颜色变暗（就像对背景颜色所做的那样）并且文本不再可见。

我猜 Outlook 会跳过背景图像格式，但我无法仅使用背景颜色来获得相同的结果。

问题：有没有一种解决方法可以产生与暗方案相同的效果？？

<table role="presentation" bgcolor="#ffffff" style="width: 100%; border-collapse: collapse; border: 0; border-spacing: 0;">
  <tr>
    <td align="center" style="padding:0; background-image:linear-gradient(#D7DDDA 0%, #D7DDDA 100%); background-size: 100% 70%; background-repeat: no-repeat; height: 442.5px;" width="auto">
      <table role="presentation">

        <tr>
          <td style="padding: 0;" 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>

        <tr>
          <td style="padding: 0;" 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>

【问题讨论】：

background-image:linear-gradient... 实际上是最近发现的一种暗模式黑客，用于强制电子邮件客户端停止更改原来的暗背景。可以肯定的是，这是专门针对 Gmail 的，但我猜这有更广泛的影响。您特别想为什么 Outlook 客户端寻求支持？有这么多！！！
我正在测试 Mac 上应用商店的最新 Outlook。只有当我们可以覆盖文本颜色的暗模式效果时，这个 hack 才会很棒。听到更多关于这个的想法也会很酷！谢谢

标签： html css html-table html-email

【解决方案1】：

您应该可以使用以下命令来定位 Outlook for Mac：

@media (prefers-color-scheme: dark) {
    .go-red { color:#FF0000!important; }
}

只需将 go-red 类添加到您的 p 标签。我通过 Litmus 在 OL Office 365 Dark (macOS) 中对此进行了测试

【讨论】：