Office 365 的 EmailOnAcid 代码分析表明不支持背景图像，无论是简写 (background: url("foo.png");) 还是显式 (background- image: url("foo.png");) 格式，也不支持 TD 元素的背景属性。除了这些样式之外，我还有针对 [if gte mso 9] 的 VML 代码。
在我的一些测试中，我看到了我的背景图像，但当我从图像/VML 平铺切换到线性渐变/VML 渐变时却看不到。这是 Office 365 最近添加某种图像支持的问题，还是 Office 365 不支持 VML 渐变？
带图片的电子邮件代码:(注意:此处显示的是附加图片的 cid 引用；测试结果主要使用 imgr.com 上托管的图片)
<head>
<style>
table.with-bg {
width: 570px;
min-height: 717px;
}
table.with-bg td.image-container {
padding: 10px;
background: url("cid:mailing_footer") repeat-x;
}
</style>
</head>
<body link="#497cbe" vlink="#497cbe" alink="#497cbe">
<table class="with-bg" cellpadding="10" cellspacing="0" border="0" width="570" height="717">
<tbody>
<tr>
<td class="image-container" background="cid:mailing_footer" bgcolor="transparent" valign="top" width="570" height="717">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:570px;height:717px;">
<v:fill type="tile" src="cid:mailing_footer" color="#ffffff" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table cellpadding="0" cellspacing="0" border="0" width="570" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tbody>
<tr>
<td width="10"> </td>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="550">
<tbody>
<tr>
<td colspan="2" align="left" bgcolor="transparent">
</td>
</tr>
<tr>
<td colspan="2" align="center" bgcolor="transparent"><img id="headerpic" src="cid:mailing_header" width="468" height="71" alt=" " title=" " style="width:468px; height: 71px;"></td>
</tr>
<tr>
<td colspan="2" class="body" style="min-height:200px;">
CONTENT GOES HERE
</td>
</tr>
</tbody>
</table>
</td>
<td width="10"> </td>
</tr>
</tbody>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</body>
渐变更改:
<head>
<style>
...
table.with-bg td.image-container {
padding: 10px;
background-color: white;
background-image: -webkit-linear-gradient(left, #b6cae8, #ffffff);
background-image: -moz-linear-gradient(left, #b6cae8, #ffffff);
background-image: -o-linear-gradient(left, #b6cae8, #ffffff);
background-image: linear-gradient(#b6cae8, white);
background: linear-gradient(#b6cae8, white);
}
</style>
</head>
<body link="#497cbe" vlink="#497cbe" alink="#497cbe">
...
<td class="image-container" background="linear-gradient(#b6cae8, white);" bgcolor="transparent" valign="top" width="570" style="background-color: white; background-image: -webkit-linear-gradient(left, #b6cae8, #ffffff); background-image: -moz-linear-gradient(left, #b6cae8, #ffffff); background-image: -o-linear-gradient(left, #b6cae8, #ffffff); background-image: linear-gradient(#b6cae8, white); background: linear-gradient(#b6cae8, white);">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:570px;">
<v:fill type="gradient" color="#ffffff" color2="#b6cae8" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
...
</body>
最佳答案
他们还通过 Email On Acid 直接提出了这个问题，他们回应说 Office 365 似乎添加了对 TD 背景属性的支持，并且他们更新了代码分析以反射(reflect)这一点。
目前似乎不支持渐变，CID 图像路径也不支持。图片的绝对 URL 有效，例如 <td background="http://foo.com/bar.jpg"> .通过 ZIP 文件上传在 EOA 上运行手动测试时，相对路径也有效 ( <td background="bar.jpg"> )，尽管我不清楚它是否/如何在正常发送的电子邮件中起作用。
注意:Office 365 和 OWA 不使用 VML，更重要的是，它们不匹配 mso条件注释!
关于html - Office 365 电子邮件背景图像/渐变或 VML 磁贴/渐变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33962079/