为 Hotmail/Outlook 的 HTML 电子邮件设置背景图片
Setting a background image on an HTML Email for Hotmail/Outlook
我们制作了一封 HTML 电子邮件，在 header 中包含背景图片并在上面添加了一些文字。我们在实现它时遇到了一些麻烦，但看起来我设法让它在大多数 reader 中看起来像虽然一些 Outlook 没有按预期显示图像，但这是可以接受的。
我发现有趣的是，似乎根本没有办法在 Hotmail/Outlook.com/MSN reader 上显示背景图像。我一直在使用 litmus.com 来验证和预览，代码分析为我提供了以下信息：
background-color is unsupported
background repeat is unsupported
background position is unsupported
background url is unsupported
background is unsupported
因此，虽然我可以阅读有关 Whosebug 的一些答案，说您可以使用完整的 "background" 属性 使其在 Hotmail 上运行，因为 Hotmail 已变成 outlook.com 我有这样的感觉东西不再受支持？
我也曾使用此代码在 Outlook 上显示它（我认为）：
<!--[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="tile" src="https://www.google.co.uk/images/srpr/logo11w.png" id="BGheaderChange_outlook" class="stay" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
我们有 header 的代码片段如下所示：
<!-- Header -->
<table style="background-color: #00a8e2; position: relative; left: 0px; top: 0px;" class="full" align="center" bgcolor="#00a8e2" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="background: #00a8e2 url('https://www.google.co.uk/images/srpr/logo11w.png') no-repeat center top; background-size: cover;" id="BGheaderChange" align="center">
<!--[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="tile" src="https://www.google.co.uk/images/srpr/logo11w.png" id="BGheaderChange_outlook" class="stay" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<!-- Wrapper -->
<table class="mobile" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<!-- Nav Mobile Wrapper -->
<table class="full" align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td align="center" width="100%">
<!-- SORTABLE -->
<div class="sortable_inner ui-sortable">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="full" object="drag-module-small" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td height="100" width="100%"></td>
</tr>
</table><!-- End Space -->
<!-- Text -->
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="mobile" object="drag-module-small" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td style="font-size: 47px; color: #ffffff; text-align: center; font-family: Helvetica,Arial,sans-serif; line-height: 50px; font-weight:bold; vertical-align: top;" class="font32" align="center" width="100%">
<p cu-identify="element_0033719102905743314">
<span style="color: rgb(255, 255, 255); font-weight: 900; " class="font40"><span style="font-family: 'Arial'; font-weight: bolder; word-break: break-word; letter-spacing: 1.3px;"><strong>The title of the email!!</strong></span></span>
</td>
</tr>
</table>
<table cu-identifier="element_07614343859779409" style="border-collapse: collapse; position: relative; left: 0px; top: 0px;" class="mobile" object="drag-module-small" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td height="20" width="100%"></td>
</tr>
</table>
<!-- Button -->
<!-- End Button -->
<div style="display: none;" id="element_0016519852050701167"></div><!-- End Space -->
<table cu-identifier="element_006155826625549221" style="border-collapse: collapse; position: relative; left: 0px; top: 0px;" class="full" object="drag-module-small" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td height="10" width="100%"></td>
</tr>
</table><div id="element_049618199923274187" style="display: none;"></div><div id="element_049618199923274187" style="display: none;"></div><!-- End Space -->
</div><!-- End SORTABLE -->
</td>
</tr>
</table>
</td>
</tr>
</table><!-- End Wrapper -->
</div>
<!--[if gte mso 9.]>
</v:textbox>
</v:fill></v:rect>
<![endif]-->
</div>
</td>
</tr>
</table>
<!-- Header End -->
我们购买了一个模板来执行此操作并正在尝试对其进行修改，该模板包含一个背景图像，但在不同的 readers 上对其进行测试时看起来甚至默认模板都无法正确处理 :( (事实上，我必须对其进行修复，现在在大多数 reader 中看起来可以接受，但 Outlook.com)
非常感谢您的帮助:)
我觉得你的代码不错，这是我的一封电子邮件中的一个片段，它适用于所有平台。
<td background="hero2.jpg" bgcolor="#c8c7bc" width="600" height="294" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:294px;">
<v:fill type="tile" src="hero2.jpg" color="#c8c7bc" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table cellspacing="0" cellpadding="0">
<tr>
<td width="598" height="293" style="text-align:left;">
<table width="400">
<tr>
<td style="padding: 30px 32px;">
<p style="font-size:36px; color: #575858; margin:0;font-family: arial, serif;">Secure your<br/>online identity</p>
<p style="font-size:26px; color: #575858; margin:24px 0 18px;font-family: arial, serif;">@DOMAINNAME@ is publicly available now</p>
<a style="font-size:17px; color: #575858; margin:0;
font-weight:bold;
text-decoration:none;
padding: 6px;
border: 2px solid #575858;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-family: arial, serif;
" href="#"><img align="absmiddle" style="border-style: none;" src="lock2.png" alt="" /> SECURE IT NOW WITH UK2</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
好吧，经过更多研究后，我发现没有任何一家公司向我发送竞选电子邮件时使用了背景图片（包括亚马逊、BBC 等公司，或许多其他拥有大量现金和令人难以置信的前端的公司），这给了我一个很好的猜测是，在 HTML 电子邮件上使用背景图像可能不是一个好方法。
我不确定是否有任何方法可以让它们在 Hotmail/MSN Live/Outlook.com 中工作，因为 Litmus 说它不支持 atm（2015 年 3 月），但我们决定更改设计并使其在没有背景图像的情况下工作。
我们仍然可以使用图片，只是要确保我们不需要它们出现在背景中。这是我们的最终解决方案。
感谢那些花时间提供帮助的人:)
我们制作了一封 HTML 电子邮件，在 header 中包含背景图片并在上面添加了一些文字。我们在实现它时遇到了一些麻烦，但看起来我设法让它在大多数 reader 中看起来像虽然一些 Outlook 没有按预期显示图像，但这是可以接受的。
我发现有趣的是，似乎根本没有办法在 Hotmail/Outlook.com/MSN reader 上显示背景图像。我一直在使用 litmus.com 来验证和预览，代码分析为我提供了以下信息：
background-color is unsupported
background repeat is unsupported
background position is unsupported
background url is unsupported
background is unsupported
因此，虽然我可以阅读有关 Whosebug 的一些答案，说您可以使用完整的 "background" 属性 使其在 Hotmail 上运行，因为 Hotmail 已变成 outlook.com 我有这样的感觉东西不再受支持？
我也曾使用此代码在 Outlook 上显示它（我认为）：
<!--[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="tile" src="https://www.google.co.uk/images/srpr/logo11w.png" id="BGheaderChange_outlook" class="stay" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
我们有 header 的代码片段如下所示：
<!-- Header -->
<table style="background-color: #00a8e2; position: relative; left: 0px; top: 0px;" class="full" align="center" bgcolor="#00a8e2" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="background: #00a8e2 url('https://www.google.co.uk/images/srpr/logo11w.png') no-repeat center top; background-size: cover;" id="BGheaderChange" align="center">
<!--[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="tile" src="https://www.google.co.uk/images/srpr/logo11w.png" id="BGheaderChange_outlook" class="stay" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<!-- Wrapper -->
<table class="mobile" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<!-- Nav Mobile Wrapper -->
<table class="full" align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td align="center" width="100%">
<!-- SORTABLE -->
<div class="sortable_inner ui-sortable">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="full" object="drag-module-small" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td height="100" width="100%"></td>
</tr>
</table><!-- End Space -->
<!-- Text -->
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="mobile" object="drag-module-small" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td style="font-size: 47px; color: #ffffff; text-align: center; font-family: Helvetica,Arial,sans-serif; line-height: 50px; font-weight:bold; vertical-align: top;" class="font32" align="center" width="100%">
<p cu-identify="element_0033719102905743314">
<span style="color: rgb(255, 255, 255); font-weight: 900; " class="font40"><span style="font-family: 'Arial'; font-weight: bolder; word-break: break-word; letter-spacing: 1.3px;"><strong>The title of the email!!</strong></span></span>
</td>
</tr>
</table>
<table cu-identifier="element_07614343859779409" style="border-collapse: collapse; position: relative; left: 0px; top: 0px;" class="mobile" object="drag-module-small" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td height="20" width="100%"></td>
</tr>
</table>
<!-- Button -->
<!-- End Button -->
<div style="display: none;" id="element_0016519852050701167"></div><!-- End Space -->
<table cu-identifier="element_006155826625549221" style="border-collapse: collapse; position: relative; left: 0px; top: 0px;" class="full" object="drag-module-small" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td height="10" width="100%"></td>
</tr>
</table><div id="element_049618199923274187" style="display: none;"></div><div id="element_049618199923274187" style="display: none;"></div><!-- End Space -->
</div><!-- End SORTABLE -->
</td>
</tr>
</table>
</td>
</tr>
</table><!-- End Wrapper -->
</div>
<!--[if gte mso 9.]>
</v:textbox>
</v:fill></v:rect>
<![endif]-->
</div>
</td>
</tr>
</table>
<!-- Header End -->
我们购买了一个模板来执行此操作并正在尝试对其进行修改，该模板包含一个背景图像，但在不同的 readers 上对其进行测试时看起来甚至默认模板都无法正确处理 :( (事实上，我必须对其进行修复，现在在大多数 reader 中看起来可以接受，但 Outlook.com)
非常感谢您的帮助:)
我觉得你的代码不错，这是我的一封电子邮件中的一个片段，它适用于所有平台。
<td background="hero2.jpg" bgcolor="#c8c7bc" width="600" height="294" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:294px;">
<v:fill type="tile" src="hero2.jpg" color="#c8c7bc" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table cellspacing="0" cellpadding="0">
<tr>
<td width="598" height="293" style="text-align:left;">
<table width="400">
<tr>
<td style="padding: 30px 32px;">
<p style="font-size:36px; color: #575858; margin:0;font-family: arial, serif;">Secure your<br/>online identity</p>
<p style="font-size:26px; color: #575858; margin:24px 0 18px;font-family: arial, serif;">@DOMAINNAME@ is publicly available now</p>
<a style="font-size:17px; color: #575858; margin:0;
font-weight:bold;
text-decoration:none;
padding: 6px;
border: 2px solid #575858;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-family: arial, serif;
" href="#"><img align="absmiddle" style="border-style: none;" src="lock2.png" alt="" /> SECURE IT NOW WITH UK2</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
好吧，经过更多研究后，我发现没有任何一家公司向我发送竞选电子邮件时使用了背景图片（包括亚马逊、BBC 等公司，或许多其他拥有大量现金和令人难以置信的前端的公司），这给了我一个很好的猜测是，在 HTML 电子邮件上使用背景图像可能不是一个好方法。
我不确定是否有任何方法可以让它们在 Hotmail/MSN Live/Outlook.com 中工作，因为 Litmus 说它不支持 atm（2015 年 3 月），但我们决定更改设计并使其在没有背景图像的情况下工作。
我们仍然可以使用图片，只是要确保我们不需要它们出现在背景中。这是我们的最终解决方案。
感谢那些花时间提供帮助的人:)