由于 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>
修复居中:
但是差距仍然出现:
知道如何正确使用背景图像并将内容居中，而不出现间隙问题吗？
最佳答案
不确定您的代码有什么问题，但也许您可以使用我在我制作的旧电子邮件中找到的这个代码。它适用于 Outlook 2010、13、16。我希望它对你有帮助。
注意:不要介意所有类(class):)
<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"> </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"> </td>
</tr>
</tbody>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
关于css - 对 Outlook 使用背景图像并居中，无间隙，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55493400/