【问题标题】:HTM Email background image not displaying on outlookHTML 电子邮件背景图像未显示在 Outlook 上
【发布时间】:2018-09-14 00:26:26
【问题描述】:

我的电子邮件版本使用campaign monitor 精心创建的知名防弹背景图片。这样可以确保这些图像在不同版本的 Outlook 上呈现。

虽然我使用了提供的正确 HTML 和 VML 代码,但在测试我的电子邮件后,它仍然不会在 Outlook 上呈现背景图像。

我目前对此束手无策,代码看起来很完美。 如果有什么看起来不正确,请告诉我。

<td background="https://image.ibb.co/dp5R4p/herobg.png" bgcolor="#7bceeb" width="640" valign="top">
  <!--[if gte mso 9]>
  		<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;">
    	<v:fill type="tile" src="https://image.ibb.co/dp5R4p/herobg.png" color="#7bceeb" />
    	<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
  	<![endif]-->
  <div>
    <table width="640" border="0" cellspacing="0" cellpadding="0" class="MainTable" style="width:640px; margin:0 auto;" align="center">
      <tbody>
        <tr>
          <td style="padding:0px 0px 0px 0px;" class="padding-top-10" align="center">
            <a href=""><img src="https://image.ibb.co/dvzyue/herocta.png" alt="hero offer" width="600" class="width-100" style="width:600px;" border="0"></a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <!--[if gte mso 9]>
    </v:textbox>
  	</v:rect>
  	<![endif]-->
</td>

【问题讨论】:

  • 奇怪。我已经通过 Litmus 运行了这个,可以看到在不同版本的 Outlook 上显示的背景图像,你有没有加载的特定版本吗?也许尝试将height 添加到 v:rect

标签: html email background-image html-email


【解决方案1】:

您已从原始代码中删除了高度。我猜这是为了响应,但 VML 只会显示在 Outlook 桌面上,所以它不需要响应。 Outlook 需要保持形状打开的高度。

【讨论】:

  • 你是对的。我只是错过了实际 td 和 VML 内部的高度 :)