背景图像在Outlook 2007及更高版本中不起作用

Question

背景图像在Outlook 2007及更高版本中不起作用

Joy*_*y_S 15 outlook background-image html-email outlook-2007

我制作了一个HTML电子邮件模板,在大多数电子邮件阅读器中工作正常,但背景图像没有在Outlook 2007,2010和2013中显示.我该如何解决这个问题？

这是电子邮件的HTML:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <style type="text/css">

         * {
             padding: 0px;
             margin: 0px;
             border: 0px;
             outline: 0px;

           }

         .ExternalClass {width:100%;} 
         .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} 

         body {-webkit-text-size-adjust:none; -ms-text-size-adjust:none;} 
         body {margin:0; padding:0;} 
         table td {border-collapse:collapse;}   

         img {max-width:100%;}      

     </style>
 </head>

 <body>

     <table width="600" cellpadding="0" cellspacing="0" border="0" style="margin:0px auto;padding:0px;display: block;">
         <tr>
             <td>

                 <table width="97%" cellpadding="0" cellspacing="0" background="http://3.bp.blogspot.com/-cD1FNllXzaw/UXa8tPE_YGI/AAAAAAAAAQs/0GNzMQJ73jU/s1600/pink_bkg.png" style="background-image:url('http://3.bp.blogspot.com/-cD1FNllXzaw/UXa8tPE_YGI/AAAAAAAAAQs/0GNzMQJ73jU/s1600/pink_bkg.png');margin:0px auto;font-family: GothamBold, Tahoma;">
                     <tr>
                          <td bgcolor="#8cb243" style=" width:97%; height:10px;"></td>
                     </tr>
                     <tr>
                         <td align="center" valign="top" style="margin:0px auto;padding-bottom:30px;height:145px; width:581px;">

                          <img src="http://3.bp.blogspot.com/-tQV21MgLHUg/UXa8r4MQXpI/AAAAAAAAAQc/MKgOlDjXPOE/s1600/logo.png" width="223" height="132" alt="logo" style="display:block;"/>

                         </td>
                     </tr>
                     <tr>
                         <td align="center" style="font-size:36px;color:#ffffff;text-transform:uppercase;font-weight:bold;-webkit-text-shadow: 2px 2px 2px #541284;-moz-text-shadow: 2px 2px 2px #541284;text-shadow:2px 2px 2px #541284;margin-bottom:5px;height:25px; width:581px;">Massive 40% discount</td>
                     </tr>
                     <tr>
                         <td align="center" style="font-size:28px;color:#cda6e6 !important;text-transform:uppercase;font-weight:bold;-webkit-text-shadow:2px 2px 2px #541284;-moz-text-shadow:2px 2px 2px #541284;text-shadow:2px 2px 2px #541284;height:15px; width:581px;">on <a href="#" target="_blank" style="color:#cda6e6 !important;font-weight:bold;text-decoration:none;" >the gift you just selected</a></td>
                     </tr>
                     <tr>
                         <td align="center" style="font-size:36px;font-weight:bold;-webkit-text-shadow:2px 2px 2px #541284;-moz-text-shadow:2px 2px 2px #541284;text-shadow:2px 2px 2px #541284;padding-bottom:60px;color:#ffffff;height:20px; width:581px;">for <span style="color:#ffffff !important;">aaa@aaa.com!</span></td>
                     </tr>
                 </table>

             </td>
         </tr>
         <tr>
             <td>
                  <table width="100%" cellpadding="0" cellspacing="0" border="0" height="83" background="http://2.bp.blogspot.com/-9VyAxADMv1Q/UXa8rfeT8fI/AAAAAAAAAQU/XmNd44ekFLA/s1600/header_bottom.png" style="background-image:url('http://2.bp.blogspot.com/-9VyAxADMv1Q/UXa8rfeT8fI/AAAAAAAAAQU/XmNd44ekFLA/s1600/header_bottom.png');background-repeat:no-repeat;" >
                     <tr>
                         <td align="center" style="font-family:GothamBold, Tahoma;font-size:14px;text-transform:uppercase;color:#000000;padding-top:20px;font-weight:bold;letter-spacing:1px;">Buy it today to take advantage of this huge discount.</td>
                     </tr>
                     <tr>
                         <td align="center" style="font-family: GothamBold, Tahoma;font-size:18px;color:#7519a3;text-transform:uppercase;font-weight:900;padding-bottom:20px;">Our little secret!</td>
                     </tr>
                  </table>
             </td>
         </tr>
        </table>
     </body>
  </html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Mat*_*lin 22

电子阅读器支持背景图像

Outlook 2007及更高版本仅支持2种显示bg图像的方法:

在body标签上使用HTML background属性
在body标签上使用内联background-image样式

在这两种情况下,Outlook都会以不同于其他电子邮件阅读器的方式缩放图像,并且无法阻止bg图像进行平铺.

因此,出于所有实际目的,背景图像不是支持各种电子邮件阅读器的选项.相反,你需要处理前景图像(img标签).

叠加元素不是一种选择

Outlook 2007 +,Gmail,Hotmail和Yahoo Mail不支持CSS定位.因此,无法在前景图像上放置文本元素.

将电子邮件切片到不同区域(通常使用HTML表格)时,每个区域可以是文本元素或前景图像.但是你不能同时拥有两个区域(即,你不能有两个元素占据相同的空间或重叠).

解决方案

对于图像顶部没有文本的区域,可以将该部分电子邮件剪切为单独的前景图像.

对于上面有文字图像的区域,有3个选项:

剪切文本作为图像的一部分.这会损害电子邮件的可用性,对于默认禁用图像的用户来说尤其有问题(因为他们最初不会看到文本).
将图像显示为背景图像,并了解Outlook 2007+的用户将无法看到图像(优雅降级).
请勿尝试在任何电子邮件阅读器中显示背景图像.

适度,选项#1通常是安全和合理的.但是当大量使用时,它会导致电子邮件中图像与文本的比例非常高,这可能会触发一些垃圾邮件过滤器.在大量使用选项#1之前,请在各种垃圾邮件过滤器中测试电子邮件.

在继续选项#2或#3之前,您可能需要与设计人员一起清除它(因为其中任何一个都会影响Outlook 2007+中的设计).从更大的角度来看,在设计电子邮件时应谨慎使用背景图像.向设计师指出使用背景图像的影响可能会有所帮助.

Answer 2

Joh*_*ohn 10

除非您使用VML,否则Outlook仅支持body标记中的背景图像.检查一下VML:http://backgrounds.cm/

以下是在body标签中工作的示例.

Answer 3

Bjo*_*son 5

我想你会发现这真的很方便：http : //www.campaignmonitor.com/css/

Outlook 2007-13 不支持 background-image 属性，因此没有任何好的方法来解决这个问题。

基于个人经验：为了在电子邮件客户端之间获得最一致的体验，我会重新设计电子邮件，使其不需要背景图像。

Answer 4

Pet*_*ter 5

您可以使用正确的 VML 执行此操作。下面的代码最适合我：

<table>
<tr>
<td background="http://fpoimg.com/300x300?text=I%20am%20a%20background%20image" width="300" height="300">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" 
    style='width:300px;height:300px;position:absolute;bottom:0;left:0;border:0;z-index:-3;' 
    src="http://fpoimg.com/300x300?text=I%20am%20a%20background%20image" />
<![endif]-->
<p>Put the rest of your content here</p>
</td>
</tr>
</table>

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，2 月前
查看次数：	66689 次
最近记录：	7 年，9 月前