Outlook HTML бюллетень: текст поверх прозрачного изображения поверх изображения - PullRequest
2 голосов
/ 15 февраля 2020

Я пытаюсь создать новостную рассылку, которая работает в Outlook.

Она должна выглядеть (как в браузерах или хороших почтовых клиентах):

Но в Outlook 2019 это выглядит так:

Два вопроса:

  1. Прозрачный фоновый рисунок просто белый и покрывает текст и изображение.

  2. Второе прозрачное фоновое изображение полностью игнорируется.

HTML код:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <style>
      /* Reset */
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      a,
      a:focus,
      a:hover {
        color: inherit;
        outline: 0;
        text-decoration: none;
      }

      /* General */
      body {
        color: #ffffff;
        font-family: 'Open Sans', 'Roboto', 'Segeo UI', Arial, sans-serif;
        font-size: 16px;
      }

      a {
        color: #ffffff;
        text-decoration: underline;
      }

      .spacer-5 {
        height: 5px;
      }

      .spacer-10 {
        height: 10px;
      }

      /* Section */
      .heading {
        color: #000000;
        font-size: 28px;
        font-weight: bold;
        max-width: 1160px;
        margin-bottom: 5px;
        padding: 10px 10px 10px 40px;
      }

      .content {
        color: #000000;
        font-weight: 600;
        max-width: 1160px;
        padding: 10px 10px 10px 40px;
      }

      .content a {
        color: #000000;
      }
    </style>
    <title>Newsletter</title>
  </head>
  <body>
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
      <tr>
        <td></td>
        <td width="1200">
          <table class="section" border="0" cellpadding="0" cellspacing="0" width="100%">
            <tr>
              <td background="https://i.ibb.co/WDCt928/img-1.png" bgcolor="#dddddd" valign="top" style="background-size:cover;">
                <!--[if gte mso 9]>
                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:1200px;">
                  <v:fill type="tile" size="100%,100%" src="https://i.ibb.co/WDCt928/img-1.png" color="#dddddd" />
                  <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                <![endif]-->
                <div>
                  <table border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                      <td class="spacer-10" colspan="2"></td>
                    </tr>
                    <tr>
                      <td background="https://i.ibb.co/TYkzN4c/transparent.png" class="heading" valign="top">
                        <!--[if gte mso 9]>
                        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
                          <v:fill type="tile" src="https://i.ibb.co/TYkzN4c/transparent.png"/>
                          <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                        <![endif]-->
                        <div>
                          Lorem ipsum dolor sit amet
                        </div>
                        <!--[if gte mso 9]>
                          </v:textbox>
                        </v:rect>
                        <![endif]-->
                      </td>
                      <td width="40"></td>
                    </tr>
                    <tr>
                      <td class="spacer-5" colspan="2"></td>
                    </tr>
                    <tr>
                      <td background="https://i.ibb.co/TYkzN4c/transparent.png" class="content">
                        <!--[if gte mso 9]>
                        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
                          <v:fill type="tile" src="https://i.ibb.co/TYkzN4c/transparent.png"/>
                          <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                        <![endif]-->
                        <div>
                          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                        </div>
                        <!--[if gte mso 9]>
                          </v:textbox>
                        </v:rect>
                        <![endif]-->
                      </td>
                      <td width="40"></td>
                    </tr>
                    <tr>
                      <td class="spacer-10" colspan="2"></td>
                    </tr>
                  </table>
                </div>
                <!--[if gte mso 9]>
                  </v:textbox>
                </v:rect>
                <![endif]-->
              </td>
            </tr>
          </table>
        </td>
        <td></td>
      </tr>
    </table>
  </body>
</html>

https://jsfiddle.net/0hb6Lqf4/

Ответы [ 2 ]

1 голос
/ 25 февраля 2020

Вы пытались установить это как атрибут style на TD? Outlook может убрать фоновое изображение из самой TD или не распознает его как допустимый атрибут, где style="" может помочь.

Это то, что я сделал в своем собственном бюллетене, чтобы исправить это. , Так что в вашем случае:

От: <td background="https://i.ibb.co/TYkzN4c/transparent.png" class="content">

до: <td style="background: url('https://i.ibb.co/TYkzN4c/transparent.png');" class="content">

Также имейте в виду, что если ваш домен не является ibb.co, почтовые клиенты склонны скрыть изображения по умолчанию и «Разрешить» пользователю загружать внешние изображения.

0 голосов
/ 25 февраля 2020

я использовал один узел npm пакет haml.io и он работал как шарм

...