Outlook '07/'10/'13 上的全宽背景
Posted
技术标签:
【中文标题】Outlook \'07/\'10/\'13 上的全宽背景【英文标题】：Full Width Backgrounds on Outlook '07/'10/'13Outlook '07/'10/'13 上的全宽背景 【发布时间】：2014-06-10 10:27:34 【问题描述】：我一直在使用活动监视器的 http://backgrounds.cm/ 代码来实现单个固定高度/宽度 <td>s，它适用于所有桌面客户端，但我们正在转向全宽电子邮件，我无法获得全宽在任何 mso 版本的 Outlook 中正确显示的选项。即，发生这种情况：
我已经按照他们的指示，将他们的代码保留为body 的第一个孩子，但背景延伸到 Outlook 的边距应该在的位置。我正在尝试在 Outlook 中找到一种方法来做单独的全宽背景行。
【问题讨论】：
可以用图片代替背景图片吗？ 即使我这样做了，我也必须使用 VML 的mso-width-percent css，这就是导致背景问题的原因。
【参考方案1】：
全宽表格单元格背景图片
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style>
v:* behavior: url(#default#VML); display: inline-block;
</style>
</head>
<body>
<center>
<table >
<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" >
<!--[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 ><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" >
<!--[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 >
<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" >
<!--[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 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 border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tr>
<td 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 border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tr>
<td 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 border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tr>
<td 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 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 border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tr>
<td 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>
【讨论】：
花了一段时间，但我想通了，为你更新了我的答案。 我非常感谢您的努力，但这仍然是固定宽度（600 像素）。全宽为 100%。 EmailOnAcid 的解决方案实际上比 Campaign Monitor 的更差。不使用inset，背景右移。
抱歉，仍在测试中。稍后我会告诉你，但看起来它正在融合在一起！
谢谢！！！！ Campaign Monitor 的防弹背景第一次让我失望了，因为没有正确对齐 Outlook 中的图像。 “指定宽度的表格单元格背景图像”部分阻止图像移动。【参考方案2】：
试试这个内置 VML 背景的流畅模板：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
<style type="text/css">
#outlook a padding:0;
bodywidth:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; /* force default font sizes */
.ExternalClass width:100%; .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div line-height: 100%; /* Hotmail */
a:active, a:visited, a[href^="tel"], a[href^="sms"] text-decoration: none; color: #005288 !important; pointer-events: auto; cursor: default;
table td border-collapse: collapse;
@media only screen and (min-width: 600px) .maxW width:600px !important;
</style>
</head>
<body style="margin: 0px; padding: 0px; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;" leftmargin="0" topmargin="0" margin margin bgcolor="#FFFFFF">
<div style="background-color:#7bceeb;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="http://i.imgur.com/XCnBXwP.png" color="#7bceeb"/>
</v:background>
<![endif]-->
<table border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" background="http://i.imgur.com/XCnBXwP.png">
<!--[if (gte mso 9)|(IE)]>
<table align="center" cellpadding="0" cellspacing="0" border="0"><tr><td valign="top">
<![endif]-->
<table class="maxW" style="max-width: 600px; margin: auto;" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" align="center">
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="margin: auto;">
<tr>
<td bgcolor="#FFFFFF" align="left" valign="top" style="padding:30px;">
Content
</td>
</tr>
</table>
</td></tr></table>
<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->
</td></tr></table>
</div>
</body></html>
【讨论】：
嗯，这很好用（它是全宽的），但不是我想要的。我重新措辞了我的问题。我要的是全宽行，而不是整个电子邮件的平铺背景。这仍然超出了前景的边缘并一直重复到底部（在边缘） 嘿@zazzyzeph 你找到解决方案了吗？我很好奇你发现了什么，以及它是否适用于 Windows 10 电子邮件应用程序，因为它不支持我们在 Outlook 中用于背景图像的常用 VML 代码。 我也在挣扎以上是关于Outlook '07/'10/'13 上的全宽背景的主要内容，如果未能解决你的问题，请参考以下文章