Outlook HTML时事通讯：透明图像上方的文本

问题描述 投票：1回答：2

我正在尝试创建在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/

html css outlook newsletter vml
2个回答
0
投票

我使用了一个节点npm包haml.io，它的工作方式就像魅力

0
投票

您是否尝试将其设置为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，则邮件客户端默认情况下倾向于隐藏图像，并“允许”用户下载外部图像。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.