html - HTML 电子邮件的表格背景图像 url 的替代方案(不使用 div)

Question

我正在尝试为正在 build 中的 HTML 电子邮件创建 header 部分。我目前正在使用 background-img url 来使用覆盖有内容的图像。但是 Outlook 2007、2010 和 2016 不支持表格上的 background-images。我找到了这个 workaround通过使用div。但是，div 不像表(对于电子邮件)那样一致，所以我想避免使用 div。

有没有一种方法可以通过 table 结构严格地实现这一点？

当前方法:

<table border="0" cellpadding="0" cellspacing="0" style="max-width:692px; background-image: url(https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/header-image.png);" width="692" height="400">
  <tbody>
    <tr>
      <td valign="top" align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;padding:25px 28px;">
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
          <tbody>
            <tr>
              <td align="left" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;">
                <a href="#" target="_blank">
                  <img alt="LOGO" src="#" style="display:block;border:0px;
													    font-family:Helvetica,Arial,sans-serif;color:#ffffff">
                </a>
              </td>
              <!-- SOCIAL ICONS -->
              <td style="text-align: right;">
                <!--YouTube -->
                <a href="#"><img src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/youtube-icon.png"></a>
                <!--Twitter -->
                <a href="#"><img src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/twitter-icon.png"></a>
                <!--LinkedIn -->
                <a href="#"><img src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/linkedin-icon.png"></a>
                <a href="#"><img src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/facebook-icon.png"></a>
              </td>
            </tr>
            <!----------------->
            <!-- HEADER TEXT -->
            <!----------------->
            <tr>
              <td colspan="2" style="padding-top:40px;">
                <!-- PADDING-->
              </td>
            </tr>
            <tr>
              <td colspan="2" style="height: 100px; color: #fff; font-family:'Open Sans',Helvetica,Arial,sans-serif; text-align: center; font-size: 26px; padding-bottom: 10px; text-transform: uppercase;">
                TEXT<br> HERE

              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

如果您希望背景图像在 Outlook 2007-2016 中起作用，只有一种方法可以起作用，那就是使用矢量标记语言 (VML)。它并没有真正使用 div，它使用 xml。 div 是包装器。

我制作了一个 Fiddle，因此您可以看到这段代码的运行情况:https://jsfiddle.net/wallyglenn/7zLaLrfx/

这是代码:

<div style="background-color:#ff0000; width:600px;">
  <!--[if (gte mso 9)|(IE)]><!-- -->
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="http://www.gwally.com/news/photos/catintinfoilhat.jpg" color="#ff0000"/>
  </v:background>
  <![endif]-->
  <table height="450" width="600" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td valign="top" align="left" background="http://www.gwally.com/news/photos/catintinfoilhat.jpg">
        <h1 style="text-align: center; color: #ffffff;-webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black; font-family: Arial, san-serif;">
        Background Image with Text on Top
      </h1>
    </td>
  </tr>
  </table>
</div>

您所做的是插入一段 xml，指示 Outlook 包含背景图像。 Outlook 将忽略您的 background="" 但会显示表格的其余部分。

这很可靠，但遗憾的是，真的别无选择。

原始代码取自https://backgrounds.cm有修改。

祝你好运。