“outlook全宽度背景”07 / '10 / '13

我一直在使用广告系列监视器的http://backgrounds.cm/单个固定高度/宽度的代码，它在所有的桌面客户端都很好用，但是我们正在转向全宽邮件，我无法获得全宽选项可以在任何mso版本的Outlook中正确显示。 即，这发生了：

litmustest

我已经按照他们的指示，并保持他们的代码作为body的第一个孩子，但背景延伸到的前景的边缘应该是..我试图find一种方式在Outlook中做单独的全宽背景行。

全宽表格单元格背景图像 

 <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>
  • 在OS X 10.9.2上，通过Windows 7 VMWare在Outlook 2010中进行testing

在这里输入图像描述

平铺全宽表格单元格背景图像 

  <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>
  • 在OS X 10.9.2上，通过Windows 7 VMWare在Outlook 2010中进行testing

在这里输入图像描述

指定宽度表单元格背景图像

这里是一个例子，两行，第一行有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>
  • 在OS X 10.9.2上，通过Windows 7 VMWare在Outlook 2010中进行testing

在这里输入图像描述

尝试使用内置VML背景的stream体模板： 

 <!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;} body{width: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" marginwidth="0" marginheight="0" 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 width="100%" 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 width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td valign="top"> <![endif]--> <table width="100%" class="maxW" style="max-width: 600px; margin: auto;" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" align="center"> <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="margin: auto;"> <tr> <td bgcolor="#FFFFFF" align="left" valign="top" height="600" 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>
Interesting Posts

消息渠道一个或多个？

我怎样才能避免谷歌邮件服务器要求我通过浏览器login？

有一个web服务或API来帮助我阅读电子邮件联系人吗？

shell脚本发送邮件

testingHTML电子邮件渲染

popup多个imapAdapter

正则expression式识别电子邮件地址很难？

“消息ID”电子邮件标题是否为每个收件人唯一？

PHP邮件，CC字段

从python通过sendmail发送邮件