Full Width Backgrounds on Outlook ’07/’10/’13
我一直在使用活动监视器的 http://backgrounds.cm/ 代码来实现单个固定高度/宽度 <td>，它适用于所有桌面客户端，但我们正在转向全宽电子邮件，我可以’ t 获得在任何 mso 版本的 Outlook 中正确显示的全宽选项。即，发生这种情况：
我已经按照他们的指示，将他们的代码保留为 body 的第一个孩子，但是背景延伸到了 Outlook 的边距应该在的位置。我正在尝试在 Outlook 中找到一种方法来做单独的全宽背景行。
- 你能用图片代替背景图片吗？
- 即使我这样做了，我也必须使用 VML 的 mso-width-percent css，这就是导致背景问题的原因。
全宽表格单元格背景图像
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<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> |
- 通过 OSX 10.9.2 上的 Windows 7 VMWare 在 Outlook 2010 中测试
平铺全宽表格单元格背景图像
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<html xmlns:v=“urn:schemas-microsoft-com:vml”>
<head> <style> v:* { behavior: url(#default#VML); display: inline-block; } </style> </head> <body> <center> </body> |
- 通过 OSX 10.9.2 上的 Windows 7 VMWare 在 Outlook 2010 中测试
指定宽度的表格单元格背景图片
这是一个例子，两行，第一行有 3 列，有 3 个单独的背景图像，第二行作为一个背景图像一直跨越。
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
<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;‘> <![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]> </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;‘> <![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]> </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;‘> <![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]> </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;‘> <![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]> </v:shape> <![endif]—> </td> </tr> </table> |
- 通过 OSX 10.9.2 上的 Windows 7 VMWare 在 Outlook 2010 中测试
- 花了一段时间，但我想通了，为你更新了我的答案。
- 我非常感谢您的努力，但这仍然是固定宽度(600px)。全宽为 100%。
- EmailOnAcid 的解决方案实际上比 Campaign Monitor 的更差。它不使用 inset，并且背景向右移动。
- 请再次查看我的答案，我想我终于明白了。 :) 经过大约 100 封测试电子邮件。
- 讨厌引起更多的挫败感，但我的出血错误仍然存??在于你的身上。尝试在其下方放置一个常规的 100% 表格，并带有 bgcolor，您就会明白我的意思。
- 不知道你的意思，因为我只是把 3 张桌子叠在一起。顶部的图像，带有背景颜色的 20 像素高的空桌子，底部的另一个图像，效果很好，结果在上面进行了调整。发送你的模拟，我会让它工作。
- 抱歉，还在测试中。我稍后会告诉你，但看起来它正在融合在一起！
- 让我知道您是否仍有问题。当我知道这一点时，我感到非常兴奋。
- 不，我是对的。由于单元格填充/间距，它看起来不错，但是当我把它们拿出来时，同样的问题。底部表格是带有 border=”0″ cellpadding=”0″ cellspacing=”0″ style=”border-collapse:collapse; padding:0; margin:0px;” litmus.com/pub/628657c/screenshots 的常规表格
- cellpadding 用来设置中间表格的高度，它只是比使用 height= 更干净我认为在这一点上，你必须付出和付出一点，如果你想让它工作你可以不要指望它像解决方案一样简单，毫无疑问，您将不得不稍微重组它周围的表格。
- 谢谢！！！！！ Campaign Monitor 的防弹背景第一次让我失望了，因为没有正确对齐 Outlook 中的图像。”指定宽度的表格单元格背景图像”部分防止图像移动。
- 在 v-rec 上使用 mso-width-percent:1000 实际上会使电子邮件比 Outlook 屏幕更大。你可以看到你的小猫图片上有一个垂直滚动条。你知道如何解决它吗？
试试这个内置 VML 背景的流畅模板：
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!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”> <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”>
<!–[if gte mso 9]> <table width=“100%” border=“0” align=“center” cellpadding=“0” cellspacing=“0”><tr><td valign=“top” background=“http://i.imgur.com/XCnBXwP.png”>
<table width=“100%” border=“0” cellpadding=“0” cellspacing=“0” bgcolor=“#FFFFFF” style=“margin: auto;”>
</td></tr></table> </body></html> |
- 嗯，很好用(它是全宽的)，但不是我想要的。我重新措辞了我的问题。我要的是全宽行，而不是整个电子邮件的平铺背景。这仍然超出了前景的边缘并一直重复到底部(在边缘)
- 嘿@zazzyzeph 你找到解决方案了吗？我很好奇你发现了什么，以及它是否适用于 Windows 10 电子邮件应用程序，因为它不支持我们在 Outlook 中用于背景图像的常用 VML 代码。
- 同样的我也在挣扎
来源：https://www.codenong.com/23280715/
