Блог

Главная - Вопросы по программированию - Установка линейного градиента на таблице, который изменит цвет на темной схеме outlook

Установка линейного градиента на таблице, который изменит цвет на темной схеме outlook

#html #css #html-table #html-email

Вопрос:

Я пытаюсь установить сплошной цветной фон, который будет покрывать первую ячейку и некоторую часть второй.

К сожалению, после тестирования его на темной схеме почтового клиента 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>

Комментарии:

1. Фоновое изображение:линейно-градиентное… на самом деле это взлом в темном режиме, выявленный недавно, чтобы заставить почтовые клиенты перестать изменять изначально темный фон. Хотя я совершенно уверен, что это было специально для Gmail, но я предполагаю, что это имеет более широкий охват. Для какого конкретно клиента Outlook вы пытаетесь найти поддержку? Их так много!!!

2. Я тестирую последнюю версию outlook из app store на Mac. Этот хак был бы замечательным, только если бы мы могли переопределить эффект темного режима для цвета текста. Было бы здорово услышать еще несколько мыслей об этом тоже! Спасибо

Ответ №1:

Вы должны быть в состоянии настроить Outlook для Mac с помощью этого:

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

Просто добавьте класс go-red в свой тег p. Я протестировал это в старом Office 365 Dark (macOS) с помощью лакмусовой бумажки

Метки: ,