Question

由于CSS不支持在Outlook 2007-2016的HTML邮件中使用背景图像，因此我尝试使用VML来解决此问题：

这是使用VML之前的DOM：

<table width="100%" align="center" height="227" border="0" cellpadding="0" cellspacing="0" >
  <tr>
    <td align="center" bgcolor="#F4C046"   
           style="background-image: url('../image.jpg');
                  background-repeat: no-repeat;
                  background-size: cover; 
                  background-position: center;
                  background-color:#F4C046;border:solid">
      <table width="600" border="0" cellpadding="0" cellspacing="0">
       <!--- some content -->
      </table>
    </td>
  </tr>
</table>

现在这适用于大多数电子邮件客户端，但是在Outlook 2007-2016中，背景图像将被忽略，并且在没有背景颜色的渲染中如下所示：

当我尝试使用“ VML”解决方案时，我的代码如下：

<table width="100%" align="center" height="227" border="0" cellpadding="0" cellspacing="0" >
  <tr>
    <td align="center" bgcolor="#F4C046"   
           style="background-image: url('../image.jpg');
                  background-repeat: no-repeat;
                  background-size: cover; 
                  background-position: center;
                  background-color:#F4C046;border:solid">
    <!--[if gte mso 9]>
     <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
        <v:fill type="frame" src="../myimg.jpg" color="#F4C046" />
            <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
            <![endif]-->    
      <table width="600" border="0" cellpadding="0" cellspacing="0">
       <!--- some content -->
      </table>
    <!--[if gte mso 9]>
                </v:textbox>
            </v:rect>
            <![endif]-->
    </td>
  </tr>
</table>

现在背景正在运行，将鼠标悬停在背景上的表格不再居中：

如果我将Outlook窗口缩小，也会出现间隙：

我可以用一张满的桌子来包装应该再居中一次的桌子，像这样：

<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">   
  <tr>
    <td align="center">
      <table width="600" border="0" cellpadding="0" cellspacing="0">
        <!--- some content -->
      </table>
    </td>
  </tr>
</table>

修复居中：

但是差距仍然出现：

有什么想法如何正确使用背景图像并居中显示内容，而不会出现间隙问题？

Answer 1

不知道您的代码有什么问题，但是也许您可以使用我在旧电子邮件中找到的代码。它适用于Outlook 2010,13,16。希望对您有帮助。

NB：不要介意所有的课程:)

<table bgcolor="#efefef" border="0" cellpadding="0" cellspacing="0" width="100%">
    <tbody>
      <tr>
        <td align="center">
          <table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0"
            class="w394 w355-413 w300-374" width="640">
            <tbody>
              <tr>
                <td align="left" background="https://placeimg.com/640/540/arch" bgcolor="#efefef"
                  class="w394 w355-413 w300-374 break h400" height="540"
                  style="background-size:640px 960px;repeat:no-repeat;" width="640">
                  <!--[if gte mso 9]>
                      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;height:540px;">
                      <v:fill type="tile" src="https://placeimg.com/640/540/arch" color="#efefef" />
                      <v:textbox inset="0,0,0,0">
                      <![endif]-->
                  <div>
                    <table align="center" border="0" cellpadding="0" cellspacing="0">
                      <tbody>
                        <tr>
                          <td height="50">&nbsp;</td>
                        </tr>
                      </tbody>
                    </table>
                    <table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0"
                      class="w280 w240-413" valign="middle" width="320">
                      <tbody>
                        <tr>
                          <td align="center" class="f28"
                            style="padding:20px;font-size:36px;line-height:40px;font-family: Arial;font-weight: 400;color:#be1f24;"
                            valign="top">Lorem <b>IPSUM</b> dolor <b>sit </b>amet</td>
                        </tr>
                      </tbody>
                    </table>
                    <table align="center" border="0" cellpadding="0" cellspacing="0">
                      <tbody>
                        <tr>
                          <td height="50">&nbsp;</td>
                        </tr>
                      </tbody>
                    </table>
                    </div>
                    <!--[if gte mso 9]>
                    </v:textbox>
                    </v:rect>
                    <![endif]-->
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>    
    </tbody>
  </table>

在Outlook中使用背景图像并居中

1 个答案: