Full Width Backgrounds on Outlook ’07/’10/’13
我一直在使用活动监视器的 http://backgrounds.cm/ 代码来实现单个固定高度/宽度
我已经按照他们的指示,将他们的代码保留为
全宽表格单元格背景图像
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> |
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/tech/269217.html