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

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

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

• 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 以帮助它在对比中脱颖而出。

要使用此功能，请更换图片网址、调整大小、更改颜色并删除不需要的文字。

祝你好运。

Answer 2

由于信息不太难确定确切的问题，但您可以尝试通过设置width="100%" 而不是width="600"。

当前是：

<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;">

改为：

<table width="100%" 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;">

Answer 3

我发现您不能使用安装在台式机或笔记本电脑中的 Outlook 的背景图像。如果您想要身体的背景图像并且它可以工作，有一些网站可以提供帮助。但是当我们谈论表格时，tr，td Outlook 不会将其识别为背景图像。

非常感谢您的帮助。像开发电子邮件模板这样的人都知道如何写出我们能写出的最好的 html 是多么困难。

Answer 4

CSS 背景支持对于 Outlook 来说不是很好。您可能需要替换为 VML 等效项。这里有一个工具：https://backgrounds.cm/

只需粘贴您的 img URL，选择您的备用 bg-color，然后选择“单个表格单元格”。然后，您需要用提供的输出替换开始和结束 td 标记。

Answer 5

我将此代码添加到我的表中。 它不适用于 Windows 上的 Outlook，而这正是 bgcolor 的用途。

style="background-position: center center !important; background-size: cover !important;" background="http:wwww.yourlink.com/folder/image.jpg" bgcolor="#9cb0b0"