Outlook '07/'10/'13 上的全宽背景 [英] Full Width Backgrounds on Outlook '07/'10/'13

查看：21
本文介绍了Outlook '07/'10/'13 上的全宽背景的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

我已经按照他们的指示，将他们的代码作为 body 的第一个孩子，但背景延伸到 Outlook 的边距应该在的地方..我试图在 Outlook 中找到一种方法做单独的全宽背景行.

解决方案

全宽表格单元格背景图片

<头><风格>v:* { 行为: url(#default#VML);显示:内联块；}</风格><身体><中心><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"><!--[如果 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"><!--[如果 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></中心>

  • 在 Outlook 2010 中通过 OSX 10.9.2 上的 Windows 7 VMWare 进行测试

<小时>

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

 <头><风格>v:* { 行为: url(#default#VML);显示:内联块；}</风格><身体><中心><表格宽度="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"><!--[如果 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></中心>

  • 在 Outlook 2010 中通过 OSX 10.9.2 上的 Windows 7 VMWare 进行测试

<小时>

指定宽度的表格单元格背景图片

这是一个例子，两行，第一行有 3 列，有 3 张单独的背景图片，第二行作为一个背景图片一直跨越.

 <tr><td style="width: 300px; height: 80px; background-image: url('http://placekitten.com/g/300/80');"><!--[如果 gte mso 9]><v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML);显示:内联块；位置:绝对；宽度:300px；高度:80px；顶部:0；左:0；边框:0；z-索引:1;'src="http://placekitten.com/g/300/80"/><v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML);显示:内联块；位置:绝对；宽度:300px；高度:80px；前5;左:-10；边框:0；z-索引: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>文本</span></td></tr>
<!--[如果 gte mso 9]>

</v:形状><![endif]--></td><td style="width: 100px; height: 80px; background-image: url('http://placekitten.com/g/100/80');"><!--[如果 gte mso 9]><v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML);显示:内联块；位置:绝对；宽度:100px；高度:80px；顶部:0；左:0；边框:0；z-索引:1;'src="http://placekitten.com/g/100/80"/><v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML);显示:内联块；位置:绝对；宽度:100px；高度:80px；前5;左:-10；边框:0；z-索引: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>文本</span></td></tr><!--[如果 gte mso 9]>

</v:形状><![endif]--></td><td style="width: 200px; height: 80px; background-image: url('http://placekitten.com/g/200/100');"><!--[如果 gte mso 9]><v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML);显示:内联块；位置:绝对；宽度:200px；高度:80px；顶部:0；左:0；边框:0；z-索引:1;'src="http://placekitten.com/g/200/100"/><v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML);显示:内联块；位置:绝对；宽度:200px；高度:80px；前5;左:-10；边框:0；z-索引: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>文本</span></td></tr><!--[如果 gte mso 9]>

</v:形状><![endif]--></td></tr><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');"><!--[如果 gte mso 9]><v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML);显示:内联块；位置:绝对；宽度:600px；高度:150px；顶部:0；左:0；边框:0；z-索引:1;'src="http://placekitten.com/g/600/150"/><v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML);显示:内联块；位置:绝对；宽度:600px；高度:150px；前5;左:-10；边框:0；z-索引: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>文本</span></td></tr><!--[如果 gte mso 9]>

</v:形状><![endif]--></td></tr>

I've been using campaign monitor's http://backgrounds.cm/ code for single fixed height/width <td>s which works great across all desktop clients, but we're moving to full width emails and I can't get the full width option to display correctly in any mso version of outlook. Namely, this happens:

I've followed their directions and kept their code as the first child of body, but the background extends into where outlook's margins should be.. I'm trying to find a way in outlook to do separate full width background rows.

解决方案

Full width table cell background images

<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>

Tiled full width table cell background images

    <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>

Specified width table cell background images

Here is an example, two rows, the first row has 3 columns with 3 separate background images, the second row spans all the way across as one background image.

    <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>

这篇关于Outlook '07/'10/'13 上的全宽背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆