时间戳

首页 > 解决方案 > 在桌子上设置线性渐变，这将在前景的黑暗方案上改变颜色

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

问题描述

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

不幸的是，在 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>

标签： htmlcsshtml-tablehtml-email

解决方案

您应该能够通过以下方式定位 Outlook for Mac：

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

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

推荐阅读