我制作了一个HTML电子邮件模板，该模板在大多数电子邮件阅读器中都可以正常工作，但是背景图像在Outlook 2007、2010和2013中未显示。如何解决该问题？
这是电子邮件的HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
padding: 0px;
margin: 0px;
border: 0px;
outline: 0px;
}
.ExternalClass {width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
body {-webkit-text-size-adjust:none; -ms-text-size-adjust:none;}
body {margin:0; padding:0;}
table td {border-collapse:collapse;}
img {max-width:100%;}
</style>
</head>
<body>
<table width="600" cellpadding="0" cellspacing="0" border="0" style="margin:0px auto;padding:0px;display: block;">
<tr>
<td>
<table width="97%" cellpadding="0" cellspacing="0" background="http://3.bp.blogspot.com/-cD1FNllXzaw/UXa8tPE_YGI/AAAAAAAAAQs/0GNzMQJ73jU/s1600/pink_bkg.png" style="background-image:url('http://3.bp.blogspot.com/-cD1FNllXzaw/UXa8tPE_YGI/AAAAAAAAAQs/0GNzMQJ73jU/s1600/pink_bkg.png');margin:0px auto;font-family: GothamBold, Tahoma;">
<tr>
<td bgcolor="#8cb243" style=" width:97%; height:10px;"></td>
</tr>
<tr>
<td align="center" valign="top" style="margin:0px auto;padding-bottom:30px;height:145px; width:581px;">
<img src="http://3.bp.blogspot.com/-tQV21MgLHUg/UXa8r4MQXpI/AAAAAAAAAQc/MKgOlDjXPOE/s1600/logo.png" width="223" height="132" alt="logo" style="display:block;"/>
</td>
</tr>
<tr>
<td align="center" style="font-size:36px;color:#ffffff;text-transform:uppercase;font-weight:bold;-webkit-text-shadow: 2px 2px 2px #541284;-moz-text-shadow: 2px 2px 2px #541284;text-shadow:2px 2px 2px #541284;margin-bottom:5px;height:25px; width:581px;">Massive 40% discount</td>
</tr>
<tr>
<td align="center" style="font-size:28px;color:#cda6e6 !important;text-transform:uppercase;font-weight:bold;-webkit-text-shadow:2px 2px 2px #541284;-moz-text-shadow:2px 2px 2px #541284;text-shadow:2px 2px 2px #541284;height:15px; width:581px;">on <a href="#" target="_blank" style="color:#cda6e6 !important;font-weight:bold;text-decoration:none;" >the gift you just selected</a></td>
</tr>
<tr>
<td align="center" style="font-size:36px;font-weight:bold;-webkit-text-shadow:2px 2px 2px #541284;-moz-text-shadow:2px 2px 2px #541284;text-shadow:2px 2px 2px #541284;padding-bottom:60px;color:#ffffff;height:20px; width:581px;">for <span style="color:#ffffff !important;">[email protected]!</span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0" border="0" height="83" background="http://2.bp.blogspot.com/-9VyAxADMv1Q/UXa8rfeT8fI/AAAAAAAAAQU/XmNd44ekFLA/s1600/header_bottom.png" style="background-image:url('http://2.bp.blogspot.com/-9VyAxADMv1Q/UXa8rfeT8fI/AAAAAAAAAQU/XmNd44ekFLA/s1600/header_bottom.png');background-repeat:no-repeat;" >
<tr>
<td align="center" style="font-family:GothamBold, Tahoma;font-size:14px;text-transform:uppercase;color:#000000;padding-top:20px;font-weight:bold;letter-spacing:1px;">Buy it today to take advantage of this huge discount.</td>
</tr>
<tr>
<td align="center" style="font-family: GothamBold, Tahoma;font-size:18px;color:#7519a3;text-transform:uppercase;font-weight:900;padding-bottom:20px;">Our little secret!</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
最佳答案
电子邮件阅读器对背景图像的支持
Outlook 2007和更高版本仅支持两种显示背景图像的方法：
在body标签上使用HTML background属性
在body标签上使用内联背景图像样式
在这两种情况下，Outlook缩放图像的方式都不同于其他电子邮件阅读器，并且无法防止bg图像平铺。
因此，出于所有实际目的，背景图片并不是支持多种电子邮件阅读器的一种选择。相反，您需要处理前景图像（img标签）。
叠加元素不是一种选择
Outlook 2007 +，Gmail，Hotmail和Yahoo Mail不支持CSS定位。结果，无法将文本元素放置在前景图像的顶部。
将电子邮件切成不同的区域（通常使用HTML表）时，每个区域可以是文本元素或前景图像。但是，您不能在同一区域中同时拥有这两个元素（即，不能有两个元素占据相同的空间或重叠）。
解决方案
对于上面没有图像的区域，可以将电子邮件的那一部分剪切为单独的前景图像。
对于上面有文字的图像的区域，有3个选项：
剪切文本作为图像的一部分。这会损害电子邮件的可用性，并且对于默认禁用图像的用户（尤其是他们最初看不到文字的用户）尤其有问题。
将图像显示为背景图像，但要了解Outlook 2007+的用户将看不到该图像（平滑降级）。
请勿尝试在任何电子邮件阅读器中显示背景图像。
适度地，选项1通常是安全合理的。但是，如果大量使用它，则会导致电子邮件中图像与文本的比率很高，这可能会触发某些垃圾邮件过滤器。在大量使用选项＃1之前，请先在各种垃圾邮件过滤器中测试电子邮件。
在继续选择选项2或＃3之前，您可能需要与设计人员将其清除（因为任何一种都会损害Outlook 2007+中的设计）。在较大的图片中，设计电子邮件时应谨慎使用背景图像。向设计人员指出使用背景图像的影响可能会有所帮助。
关于outlook - 背景图片在Outlook 2007及更高版本中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16441034/