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测试了此代码，以确保它当前可在支持某种形式的背景图片的每个电子邮件客户端中使用。

您应该看到的是一个600x450px的图像，红色背景进行对比，图像顶部的<h1>文字带有一些CSS，可以使它在对比度方面脱颖而出。

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

祝你好运。

Answer 2

由于信息很少，因此很难确定确切的问题，但是您可以尝试设置subj block rt 1 1 2 345 2 1 2 118 3 1 2 302 4 1 2 698 5 1 2 154 6 2 3 347 7 2 3 391 8 2 3 414 9 2 3 427 10 2 3 369 11 6 1 685 12 6 1 369 13 6 1 457 14 6 1 566 15 6 1 542而不是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;">

Answer 3

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

非常感谢您的帮助。像开发电子邮件模板这样的人都知道要找出如何编写我们能做到的最佳html的难度。 <3

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"

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

5 个答案: