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

【问题标题】：Background images not working in Outlook 2007 and later背景图像在 Outlook 2007 及更高版本中不起作用
【发布时间】：2013-05-02 16:54:41
【问题描述】：

我制作的 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>

【问题讨论】：

你在outlook查看邮件的时候下载图片了吗？
Full Width Backgrounds on Outlook '07/'10/'13 的可能重复项

标签： outlook background-image html-email outlook-2007

【解决方案1】：

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

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

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

【讨论】：

我之前已经检查过链接，但我没有任何解决方案。

【解决方案2】：

background-image 在 Android 2.3 上的 Outlook 或 Gmail 中不受支持。见：http://www.campaignmonitor.com/css/

我通常使用background-color 作为后备，或者如果需要背景图像，则将文本作为图像的一部分。

【讨论】：

实际上很难将颜色与图像匹配。
您正在使用一些我认为可以正常降级的元素，例如text-shadow，这些元素在 Outlook 等电子邮件客户端中不起作用。所以在这种情况下，我认为设置background-color:#8a17aa;background-image:url('http://3.bp.blogspot.com/-cD1FNllXzaw/UXa8tPE_YGI/AAAAAAAAAQs/0GNzMQJ73jU/s1600/pink_bkg.png'); 将是一个可行的解决方案。
是的，我已经将这种样式用于背景图像，但颜色看起来几乎相同。谢谢。

【解决方案3】：

对背景图片的电子邮件阅读器支持

Outlook 2007 及更高版本仅支持两种显示背景图像的方式：

在 body 标签上使用 HTML 背景属性
在正文标签上使用内联背景图像样式

在这两种情况下，Outlook 缩放图像的方式与其他电子邮件阅读器不同，并且无法阻止 bg 图像平铺。

因此，出于所有实际目的，背景图片不是支持各种电子邮件阅读器的选项。相反，您需要使用前景图像（img 标签）。

叠加元素不是一种选择

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

将电子邮件分割成不同的区域（通常使用 HTML 表格）时，每个区域可以是文本元素或前景图像。但是你不能在同一个区域中同时拥有两者（即，你不能让两个元素占据相同的空间或重叠）。

解决方案

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

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

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

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

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

【讨论】：

嗨，马特，好的。感谢您的宝贵意见，但我不明白一点。所以你能说得更清楚一点吗？实际上我不清楚“叠加元素不是一种选择”。您的意思是在图像上放置文字？
@user2361994：是的，没错。您不能在图像上放置文本。更一般地说，您不能将任何类型的元素放在另一个元素上，或者使两个元素重叠。我编辑了答案，试图让它更清楚一点。
@John: 顺便说一句，这样做所需的VML code 本身就是反对在 HTML 电子邮件中使用背景图像的有力论据 :) 此外，VML 的这种使用似乎会导致 styling issues 用于内容在受影响的元素内。我不相信 VML 是一个可行的选择。
@MattCoughlin 我自己并没有真正尝试过它，但是在您包含的“样式问题”链接上，有一些回复帖子礼貌地质疑她的发现。社区中有一些资深的电子邮件设计师（我个人更信任他们）说它有效，但最终对于电子邮件，你总是不得不承认可能存在妥协。无论如何，我认为这是一个可行的替代方案，值得作为一种技术纳入。

【解决方案4】：

除非您使用 VML，否则 Outlook 仅支持 body 标记中的背景图像。查看 VML：http://backgrounds.cm/

Here is an example 在 body 标签中工作。

【讨论】：

【解决方案5】：

我刚刚在 MailChimp 中创建批量电子邮件模板时遇到了这个问题。

虽然 Outlook 客户端软件只允许使用正文标签背景，但这些标签已被 Outlook webmail (hotmail)、gmail 等网络邮件站点剥离。

反过来也是如此... Outlook 客户端去除表格背景图像，而 webmail 客户端允许表格背景。

解决方案：同时使用：

<body background="image.jpg">
<table width="100%" background="image.jpg">

在 Mailchimp 本身中，这似乎显示错误 - 您可以看到表格背景边缘周围的正文背景边缘，但是当它到达收件人时，根据是否删除其中一个或另一个他们正在使用 Outlook 客户端软件或 Hotmail/Gmail 网络邮件。

我还没有在其他电子邮件客户端程序或网络邮件中尝试过这个，所以我不知道是否有其他人会同时显示这两者。如果有人在 Hotmail 或 Gmail 以外的其他电子邮件客户端软件或 webmail 上尝试过此方法，我非常想知道此修复程序是否通用。

【讨论】：

【解决方案6】：

outlook 2007+ 不支持背景图片使用 VML（Vector Markup Language (VML) 是一种基于 XML 的二维矢量图形文件格式。）获得支持例如：

   <div>
     <!--[if gte mso 9]>
     <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
      <v:fill type="tile" src="pink_bkg.png.png" color="#fff"/>
     </v:background>
     <![endif]-->
     <table>
       <tr>
         <td>
         </td>
       </tr>
      </table>
   </div>

帮助链接：http://backgrounds.cm/

Outlook 特定 /* 你的 Outlook 特定的 CSS 放在这里。 */

“mso 9”是 Office 2000 Outlook 2000 - 版本 9 展望 2002 - 版本 10 展望 2003 - 版本 11 展望 2007 - 版本 12 展望 2010 - 版本 14 展望 2013 - 版本 15 http://templates.mailchimp.com/development/css/outlook-conditional-css/

【讨论】：

【解决方案7】：

您可以使用正确的 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>

【讨论】：

【解决方案8】：

我们可以这样添加：-

在开始标记之后添加以下内容...

<table cellpadding="0" cellspacing="0" border="0" height="92" width="100%">
  <tr>
    <td background="https://i.imgur.com/YJOX1PC.png" bgcolor="#7bceeb" valign="top">
      <!--[if gte mso 9]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:92px;">
        <v:fill type="tile" src="https://i.imgur.com/YJOX1PC.png" color="#7bceeb" />
        <v:textbox inset="0,0,0,0">
      <![endif]-->
      <div>

...这个就在结束标签之前。

      </div>
      <!--[if gte mso 9]>
        </v:textbox>
      </v:rect>
      <![endif]-->
    </td>
  </tr>
</table>

【讨论】：

您还可以将 style="mso-fit-shape-to-text:true" 添加到您的文本框中，不必输入高度。

【解决方案9】：

2018 年 10 月 - 在 Outlook 2016 中测试

我想我会加入对我有用的 VML sn-p。取自https://medium.com/@ka.robinson82/https-medium-com-ka-robinson82-fargo-email-6907f00fed16

<! — [if gte mso 9]>
<v:image xmlns:v=”urn:schemas-microsoft-com:vml” style=”width:525pt; height:348.75pt;” src=”image.jpg" /> 
<v:rect xmlns:v=”urn:schemas-microsoft-com:vml” fill=”false” stroke=”false” style=”position: relative; width:525pt; height: 161.25pt; top: 187.5pt;”>
    <v:textbox inset=”0,0,0,0"> 
<![endif] 

<!-- Content -->

<!--[if gte mso 9]>   
    </v:textbox>
</v:rect>
<![endif]-->

其他 VML sn-ps 在一定程度上可以工作，但我遇到了图像在离开电子邮件并返回后消失的问题，或者直到点击背景才加载。

【讨论】：