我制作的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;">aaa@aaa.com!</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>
答案 0 :(得分：22)
Outlook 2007及更高版本仅支持2种显示bg图像的方式：
在这两种情况下，Outlook都会以不同于其他电子邮件阅读器的方式缩放图像，并且无法阻止bg图像平铺。
因此，出于所有实际目的，背景图像不是支持各种电子邮件阅读器的选项。相反，您需要处理前景图像（img标记）。
Outlook 2007 +，Gmail，Hotmail和Yahoo Mail不支持CSS定位。因此，无法在前景图像上放置文本元素。
将电子邮件分成不同的区域（通常使用HTML表格）时，每个区域可以是文本元素或前景图像。但是你不能在同一区域内拥有两者（即，你不能有两个元素占据相同的空间或重叠）。
对于图像顶部没有文字的区域，可以将该部分电子邮件剪切为单独的前景图像。
对于上面有文字图像的区域，有3个选项：
在审核中，选项＃1通常是安全合理的。但是当大量使用时，它会导致电子邮件中图像与文本的比例非常高，这可能会触发一些垃圾邮件过滤器。在大量使用选项＃1之前，请在各种垃圾邮件过滤器中测试电子邮件。
在继续选项＃2或＃3之前，您可能需要与设计人员一起清除它（因为其中任何一个都会影响Outlook 2007+中的设计）。从更大的角度来看，在设计电子邮件时应谨慎使用背景图像。向设计师指出使用背景图像的影响可能会有所帮助。
答案 1 :(得分：10)
Here is an example它在body标签中工作。
答案 2 :(得分：4)
我想你会觉得这很方便：http://www.campaignmonitor.com/css/
Outlook 2007-13不支持background-image属性，因此没有任何好办法解决此问题。
根据个人经验：为了在电子邮件客户端获得最一致的体验，我会重新设计电子邮件，以便不需要背景图片。
答案 3 :(得分：3)
background-image。请参阅：http://www.campaignmonitor.com/css/
我通常使用background-color作为后备，或者如果需要背景图像，则将文本作为图像的一部分。
答案 4 :(得分：3)
您可以使用正确的VML执行此操作。以下代码最适合我：
<table>
<tr>
<td background="http://fpoimg.com/300x300?text=I%20am%20a%20background%20image" width="300" height="300">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml"
style='width:300px;height:300px;position:absolute;bottom:0;left:0;border:0;z-index:-3;'
src="http://fpoimg.com/300x300?text=I%20am%20a%20background%20image" />
<![endif]-->
<p>Put the rest of your content here</p>
</td>
</tr>
</table>
答案 5 :(得分：2)
Outlook 2007+中不支持背景图片 使用VML（矢量标记语言（VML）是一种基于XML的二维矢量图形文件格式。）获得支持 例如：
<div>
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="pink_bkg.png.png" color="#fff"/>
</v:background>
<![endif]-->
<table>
<tr>
<td>
</td>
</tr>
</table>
</div>
特定于Outlook / *您的Outlook特定CSS在这里。 * /
'mso 9'是Office 2000 Outlook 2000 - 版本9 Outlook 2002 - 版本10 Outlook 2003 - 版本11 Outlook 2007 - 版本12 Outlook 2010 - 版本14 Outlook 2013 - 第15版 http://templates.mailchimp.com/development/css/outlook-conditional-css/
答案 6 :(得分：1)
我们可以这样添加：-
在开始标记之后添加以下内容...
<table cellpadding="0" cellspacing="0" border="0" height="92" width="100%">
<tr>
<td background="https://i.imgur.com/YJOX1PC.png" bgcolor="#7bceeb" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:92px;">
<v:fill type="tile" src="https://i.imgur.com/YJOX1PC.png" color="#7bceeb" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
...并且在结束标记之前。
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
答案 7 :(得分：0)
2018年10月-在Outlook 2016中进行了测试
想到我会喜欢对我有用的VML代码段。取自https://medium.com/@ka.robinson82/https-medium-com-ka-robinson82-fargo-email-6907f00fed16
<! — [if gte mso 9]>
<v:image xmlns:v=”urn:schemas-microsoft-com:vml” style=”width:525pt; height:348.75pt;” src=”image.jpg" />
<v:rect xmlns:v=”urn:schemas-microsoft-com:vml” fill=”false” stroke=”false” style=”position: relative; width:525pt; height: 161.25pt; top: 187.5pt;”>
<v:textbox inset=”0,0,0,0">
<![endif]
<!-- Content -->
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
其他VML片段在一定程度上可以正常工作，但是我在离开电子邮件并返回后图像消失了，或者直到单击背景后才加载图像。
答案 8 :(得分：-2)
我在MailChimp中创建批量电子邮件模板时遇到了这个问题。
虽然Outlook客户端软件只允许使用正文标记背景，但这些内容会被Outlook webmail（hotmail），gmail等Webmail网站删除。
反过来也是如此... Outlook客户端剥离表背景图像，而webmail客户端允许表背景。
解决方案：同时使用：
<body background="image.jpg">
<table width="100%" background="image.jpg">
在Mailchimp本身，这似乎错误地显示 - 你可以看到桌面背景边缘周围的身体背景的边缘，但是当它到达收件人时，其中一个或另一个被剥离取决于是否他们使用的是Outlook客户端软件或Hotmail / Gmail网络邮件。
我还没有在其他电子邮件客户端程序或网络邮件中尝试这个，所以我不知道是否有其他人会同时显示这两个。如果有人使用其他电子邮件客户端软件或Hotmail或Gmail以外的网络邮件尝试过此方法，我非常想知道此修复是否具有普遍性。