Outlook HTML 时事通讯：文本覆盖透明图像覆盖图像答案

【问题标题】：Outlook HTML newsletter: text over transparent image over imageOutlook HTML 时事通讯：文本覆盖透明图像覆盖图像
【发布时间】：2020-05-30 17:09:53
【问题描述】：

我正在尝试创建一个在 Outlook 中工作的时事通讯。

它应该看起来像（在浏览器或良好的电子邮件客户端中也是如此）：

但它在 Outlook 2019 中看起来像：

两个问题：

透明背景图片只是白色，覆盖了文字和图片。
第二张透明背景图片被完全忽略。

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/

【问题讨论】：

尝试在table 上使用透明背景而不是td，就像您使用上面的彩色背景图片一样
用background-color: rgba(255,255,255,.2);代替半透明的白色图像怎么样？
@ArturCapraro Outlook 不支持此功能。

标签： html css outlook newsletter vml

【解决方案1】：

您是否尝试过将此设置为TD 上的style 属性？ 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，邮件客户端默认会隐藏图片并“允许”用户下载外部图片。

【讨论】：

【解决方案2】：

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

【讨论】：