码农家园

关闭
导航

关于 html：Outlook \\’07/\\’10/\\’13 上的全宽背景


emailhtmlhtml-emailoutlook

Full Width Backgrounds on Outlook '07/'10/'13

我一直在使用活动监视器的 http://backgrounds.cm/ 代码来实现单个固定高度/宽度 <td>，它适用于所有桌面客户端，但我们正在转向全宽电子邮件，我可以' t 获得在任何 mso 版本的 Outlook 中正确显示的全宽选项。即，发生这种情况：

litmustest

我已经按照他们的指示，将他们的代码保留为 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 中测试

enter

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>
        <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>
  • 通过 OSX 10.9.2 上的 Windows 7 VMWare 在 Outlook 2010 中测试

enter

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 中测试

enter

相关讨论

  • 花了一段时间，但我想通了，为你更新了我的答案。
  • 我非常感谢您的努力，但这仍然是固定宽度(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]>
  <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>


</body></html>
相关讨论

  • 嗯，很好用(它是全宽的)，但不是我想要的。我重新措辞了我的问题。我要的是全宽行，而不是整个电子邮件的平铺背景。这仍然超出了前景的边缘并一直重复到底部(在边缘)
  • 嘿@zazzyzeph 你找到解决方案了吗？我很好奇你发现了什么，以及它是否适用于 Windows 10 电子邮件应用程序，因为它不支持我们在 Outlook 中用于背景图像的常用 VML 代码。
  • 同样的我也在挣扎

Copyright ©  码农家园 联系：[email protected]