Html 电子邮件模板无法正常工作

Question

我来这里之前已经搜索了很多。

我正在尝试使用 background-image，但是当我将它发送到 outlook 时它没有出现。你能帮我找到这个问题的解决方案吗？

<table width="600" border="0" cellpadding="0" cellspacing="0" valign="top" style="padding-bottom: 10px;overflow:hidden !important;border-radius: 0px 0px 0px 0px; background-color: #efefef; vertical-align: middle; max-width: 600px;">
  <tr style="background:;#efefef;" align="center" width="564px">
    <td width="10%">&nbsp;</td>

    <td style="background-image: url('https://www.dcg.com.br/emkt/17-07/bg_02.jpg');" bgcolor="#fff" background="https://www.dcg.com.br/emkt/17-07/bg_02.jpg" align="center" max-width="600px" style="font-family: Arial, sans-serif; font-size:18px; line-height:24px;  color:#6f757c;">
      <p align="center" style="display:inline-block;background:transparent;text-align:center;font-size:18px;font-family:Arial, Helvetica, sans-serif;box-sizing: border-box; ">
        <br>
        <strong style="font-size:27px">Eletrolar Show</strong><br/> A maior feira B2B da América Latina
        <br/>
      </p>
    </td>
    <td width="10%">&nbsp;</td>
  </tr>
</table>

Answer 1

背景图像使用 background Outlook、Notes、某些版本的 Android 和其他一些电子邮件客户端不支持。

• > https://www.campaignmonitor.com/css/color-background/background/

让背景图像与 Outlook 一起工作的唯一方法是使用 VML 代码。我发布了一个示例和指向 JS Fiddle 代码的链接。

• https://jsfiddle.net/wallyglenn/7zLaLrfx/15/

  <div style="background-color:#ff0000; width:600px;">
  <table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" width="600" height="450">
    <tr>
      <td background="http://www.gwally.com/news/photos/catintinfoilhat.jpg" bgcolor="#ff0000" valign="middle" style="text-align: center; background-position: center center !important; background-size: cover !important;">
      <!--[if gte mso 9]>
        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:450px; background-position: center center !important;">
        <v:fill type="tile" src="http://www.gwally.com/news/photos/catintinfoilhat.jpg" color="#FF0000" />
        <v:textbox inset="0,0,0,0">
      <![endif]-->
      <div>
      <table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
          <td valign="middle" style="text-align: center; padding: 40px; font-family: sans-serif; font-size: 15px; line-height: 140%; color: #ffffff;">
            <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>
      <!--[if gte mso 9]>
      </v:textbox>
      </v:rect>
      <![endif]-->
      </td>
    </tr>
  </table>
  </div>
  

我使用 http://litmus.com 测试了这段代码就在我发布它之前，以确保它目前在每个支持某种形式的背景图像的电子邮件客户端中都能正常工作。

您应该看到一张 600x450 像素的图像，红色背景用于对比，<h1>图像顶部的文本和一些 CSS 以帮助它在对比中脱颖而出。

要使用它，请换掉图片 url、调整大小、更改颜色并删除不需要的文本。

祝你好运。