有人告诉我，使用表格是发送电子邮件的最佳方式，尽管它的难度是前者的两倍。我已经在表格中设置了电子邮件，使用background="" 属性设置了所有需要背景的单元格，以及在<style> 标签中使用CSS 来覆盖我的基础。身体背景在前景中显示良好，但 TD 背景却没有。我也尝试过使用，但这也不起作用。我已经读到 Outlook 2007 不支持背景图像，并且将来也不支持，我认为必须有办法解决它？
【问题讨论】：
标签： html css email outlook-2007
您之前可能已经阅读过我们对applying a background image to an email 的处理方法。这不仅涉及将背景图像添加到整个 HTML 页面，还涉及将所有内容包装在一个表格中并应用背景图像。但是，此方法有一个限制，因为您可以将背景图像应用于整个表格，但不能将背景图像应用于单个表格单元格。感谢我们的一位明星客户Brian Thies，我们看到了一个小代码，它不仅可以让您使用add a background image to a table cell，而且还可以在大多数主要的电子邮件客户端中使用...
此技术...强制在 Outlook 2003/2007/2010 中显示背景图像...
【讨论】：
查看此链接以了解 Outlook 2007 中支持的 HTML 和 CSS 标记：
http://msdn.microsoft.com/en-us/library/aa338201%28v=office.12%29.aspx
MS 还在上面的 URL 中提供了适用于 Outlook 2007 的 HTML/CSS 验证工具。这至少可以为您提供一种测试方法。
当谈到 HTML 电子邮件时，我发现“少即是多” - 简单的布局，简单的技术。由于每个电子邮件客户端都会有所不同，因此“简化”它是保证最广泛覆盖范围的唯一方法。
【讨论】：
我制作了很多 HTML 电子邮件，发现如果不使用一些 hack，背景图像是不可行的。
始终在 TD 中为您的图片使用 <img> 标签。如果您希望在图像顶部显示文本，请将其包含到图像中并在 img 标记的 alt 属性中重复文本。
你可以看到一个I have made here。它使用非常少的 CSS 和 img 标签，而且几乎可以在所有电子邮件客户端中完美呈现。
不幸的是，对于 HTML 电子邮件，我们的能力有限，但有一些方法可以解决：)
希望有所帮助:)
【讨论】：
幸运的是，您可以使用一些格式调整来解决这个问题。好处是使您的 HTML 电子邮件与 Outlook 2007 兼容可以减少它最终进入收件人的垃圾文件夹的机会。不利的一面是，您可能必须更改处理电子邮件部分格式的方式，从而影响广告素材的外观和感觉。下面列出了需要注意的关键项目，以及与 Outlook 2007 兼容的可能替代方案。
背景图像 – 背景图像不会显示在 Outlook 2007 中。这可能会在您的电子邮件中留下很大的、意想不到的空白。您应该完全避免使用背景图像。只要有可能，您应该改用内联图像标签。如果您觉得必须使用背景图像，请设置适当的背景颜色以填充可能丢失的图像。如果您有文本覆盖背景图像，您可以编辑图像以包含文本并将图像映射用于任何链接。
Division 标签 – Outlook 2007 不完全支持“Div”标签。一些更常用的已被省略的属性包括：float、clear、position 和 padding。没有这些属性，用 div 标签定位几乎是不可能的。相反，您应该使用标准表格来控制电子邮件的位置。
表单 – Outlook 2007 不支持表单。Outlook 2007 收件人将无法提交嵌入在电子邮件中的任何表单。如果您希望让收件人选择填写表格，请在电子邮件中放置一个在线版本的链接。
Flash 和 JavaScript – 建议您不要尝试在 HTML 电子邮件中使用 Flash 或 Javascript，因为它们在电子邮件浏览器（包括 Outlook 2007）中缺乏支持，而且某些过滤器会标记包含 Flash 或 JavaScript 代码的电子邮件。此外，作为一项安全措施，大多数电子邮件阅读器会自动禁用此内容。
带图像的项目符号列表 - 虽然完全支持有序列表和无序列表，但不支持使用图像作为项目符号而不是标准项目符号的列表。如果您需要为您的项目符号点使用图像，一种可能的解决方案是将您的列表放入一个两列表格中，使用左侧列来放置您的项目符号。
动画 GIF - 动画 GIF 在 Outlook 2007 中不会动画。图像会出现，但只会显示动画的第一帧。
Alt 标记 - 也不支持 Alt 标记。这是在打开电子邮件时未加载图像时显示的文本。但是，大多数电子邮件阅读器都支持 alt 标签，并且将它们放在与 Outlook 2007 兼容的电子邮件中并没有负面影响（除了它们不会显示的事实），因此如果您愿意，可以继续在电子邮件中包含这些.
表格定义 - 正如我们在上面详述的，Outlook 2007 在 Microsoft® Word 中呈现 HTML 电子邮件，这对额外的 <tr> 或 <td> 标记非常敏感，并且不能很好地适应尺寸不佳的表格。以前的 Outlook 版本会在 Internet Explorer 中打开电子邮件，这对糟糕的表定义非常宽容。您应该确保您的表格定义是正确的，并且您放置在表格中的数据正确地适合定义的表格宽度。
【讨论】：
你可以这样做，inside <td> where you want bg image place another table 并这样做。
<td> < !-- this is table where you want to set bg image -->
< table background="myimg.jpg" style="background-repeat:no-repeat;" >
here goes content
</table>
</td>
这将涵盖整个，它在 Outlook 中完美运行
【讨论】：
这对我有用：
<td background="http://www.thiespublishing.com/oneimage.gif" height="402" width="600" bgcolor="#cccccc">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:402px; width:600px;top:0;left:0;border:0;z-index:1;' src="http://www.thiespublishing.com/oneimage.gif"/>
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:407px; width:610px;top:-5;left:-10;border:0;z-index:2;'>
<div>
<![endif]-->
<!-- This is where you nest a table with the content that will float over the image -->
<table width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="600" height="402" valign="top">
Insert content here, including additional nested tables.
</td>
</tr>
</table>
<!-- This ends the nested table content -->
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
</td>
【讨论】：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style>
v:* { behavior: url(#default#VML); display: inline-block; }
</style>
</head>
<body>
<center>
<table width="100%" height="20">
<tr>
<td bgcolor="#dddddd" style="background-image:url('http://placekitten.com/g/500/300');background-repeat:no-repeat;background-position:center;" background="http://placekitten.com/g/500/300" width="100%" height="300">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:300px;">
<v:fill type="frame" src="http://placekitten.com/g/500/300" color="#ffffff" />
</v:rect>
<![endif]-->
</td>
</tr>
<tr>
<td bgcolor="#33cc99">
<table border="0" cellpadding="5" cellspacing="0"><tr><td height="5"><table border="0" cellpadding="0" cellspacing="0"><tr><td></td></tr></table></td></tr></table>
</td>
</tr>
<tr>
<td bgcolor="#ffff99" style="background-image:url('http://placekitten.com/g/500/300');background-repeat:no-repeat;background-position:center;" background="http://placekitten.com/g/500/300" width="100%" height="300">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:300px;">
<v:fill type="frame" src="http://placekitten.com/g/500/300" color="#ffffff" />
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</center>
</body>
</html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style>
v:* { behavior: url(#default#VML); display: inline-block; }
</style>
</head>
<body>
<center>
<table width="100%">
<tr>
<td bgcolor="#dddddd" style="background-image:url('http://placekitten.com/g/500/300');background-repeat:no-repeat;background-position:center;" background="http://placekitten.com/g/500/300" width="100%" height="300">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:300px;">
<v:fill type="tile" src="http://placekitten.com/g/500/300" color="#ffffff" />
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</center>
</body>
</html>
这是一个例子，两行，第一行有 3 列，有 3 张单独的背景图片，第二行作为一个背景图片一直跨越。
<table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td style="width: 300px; height: 80px; background-image: url('http://placekitten.com/g/300/80');">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 300px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/300/80" />
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 300px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;'>
<div>
<![endif]-->
<table width="300" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tr>
<td height="80" align="center" valign="top" style="color:#ffffff;font-size:20px;">
<span>Text</span>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
</td>
<td style="width: 100px; height: 80px; background-image: url('http://placekitten.com/g/100/80');">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 100px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/100/80" />
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 100px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;'>
<div>
<![endif]-->
<table width="80" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tr>
<td height="80" align="center" valign="top">
<span>Text</span>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
</td>
<td style="width: 200px; height: 80px; background-image: url('http://placekitten.com/g/200/100');">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 200px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/200/100" />
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 200px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;'>
<div>
<![endif]-->
<table width="200" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tr>
<td height="80" align="center" valign="top" style="color:#ffffff;font-size:20px;">
<span>Text</span>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
</td>
</tr>
</table>
<table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td style="width: 600px; height: 150px; background-image: url('http://placekitten.com/g/600/150');">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 600px; height: 150px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/600/150" />
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 600px; height: 150px; top: -5; left: -10; border: 0; z-index: 2;'>
<div>
<![endif]-->
<table width="600" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tr>
<td height="150" align="center" valign="top" style="color:#ffffff;font-size:20px;">
<span>Text</span>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
</td>
</tr>
</table>
【讨论】：