时间戳

首页 > 解决方案 > 在 Outlook 2018 中不覆盖 td 的背景图像

html - 在 Outlook 2018 中不覆盖 td 的背景图像

问题描述

我的电子邮件中有背景图片，我使用防弹背景进行了配置。在 Litmus 中，预览看起来完全符合我对 Outlook 的期望。

但是，对于最新版本的 Office 365（版本 1808 - Build 10730.20102），背景图片没有覆盖 td 的整个宽度？

预览：

在此处输入图像描述

深蓝色是后备颜色，但对于该特定 Outlook 版本，背景图像不会覆盖整个td.

不确定这是为什么？

代码：

<table>
  <tbody>
    <tr>
      <!-- Condition to allow background images to work in Outlook -->
      <td style=" background-repeat: no-repeat;background-size: cover; max-height: 384px; min-width:600px;" background="https://storage.pardot.com/213851/80721/email_insert_1.png" bgcolor="#1f3c5a" height="384px" width="600" valign="top">
        <!--[if gte mso 9]>
                  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; height: 384px;">
                  <v:fill type="tile" src="https://storage.pardot.com/213851/80721/email_insert_1.png" color="#1f3c5a" />
                  <v:textbox inset="0,0,0,0">
                  <![endif]-->
        <div style="min-height:300px;">
          <table border="0" cellpadding="0" cellspacing="0">
            <tbody>
              <!-- Creating padding above nested div -->
              <tr>
                <td height="30" style="height:30px;">
                  <!--PADDING-->
                </td>
              </tr>

            </tbody>
          </table>
        </div>
        <!--[if gte mso 9]>
                  </v:textbox>
                  </v:rect>
                  <![endif]-->
      </td>
    </tr>
  </tbody>
</table>

标签： htmlcssemailbackground-image

解决方案

请再次检查一些更改。

<table bgcolor="#1f3c5a" style="vertical-align: top; background-position: top center; background-repeat: no-repeat;background-size: cover; -webkit-background-size: cover; max-height: 384px; width:600px;" background="https://storage.pardot.com/213851/80721/email_insert_1.png" border="0" cellpadding="0" cellspacing="0" width="600">
  <tbody>
    <tr>
      <!-- Condition to allow background images to work in Outlook -->
      <td  height="384px" width="600" valign="top">
        <!--[if gte mso 9]>
                  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; height: 384px;">
                  <v:fill type="tile" src="https://storage.pardot.com/213851/80721/email_insert_1.png" color="#1f3c5a" />
                  <v:textbox inset="0,0,0,0">
                  <![endif]-->
        <div style="min-height:300px;">
          <table border="0" cellpadding="0" cellspacing="0">
            <tbody>
              <!-- Creating padding above nested div -->
              <tr>
                <td height="30" style="height:30px;">
                  <!--PADDING-->
                </td>
              </tr>

            </tbody>
          </table>
        </div>
        <!--[if gte mso 9]>
                  </v:textbox>
                  </v:rect>
                  <![endif]-->
      </td>
    </tr>
  </tbody>
</table>

推荐阅读