背景图片无法在Outlook 2007及更高版本的工作(Background images not

-->

背景图片无法在Outlook 2007及更高版本的工作(Background images not

2019-09-02 06:09发布

站内文章 / 前端开发

40 0

闹够了就滚

女 | 书童

私信

我提出，在大多数电子邮件阅读器工作正常的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>

Answer 1:

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

Outlook 2007和更高版本只支持2种方式来显示背景图片：

使用对身体标记的HTML背景属性
使用内嵌background-image样式的body标签

在这两种情况下，Outlook中不同的缩放图像比其他电子邮件阅读器，而且也没有办法阻止平铺的背景图片。

因此，对于所有的实际目的，背景图片是不支持广泛的电子邮件阅读器的一个选项。相反，你需要凑合用前景图像（ img标记）。

覆盖元件是不是一种选择

展望2007+时，Gmail，Hotmail和雅虎邮箱不支持CSS的定位。其结果是，有没有办法来放置文本元素的前景图像的顶部。

当切片显示的电子邮件为不同的区域（通常使用HTML表格），每个区域可以是一个文本元素或前景图像。但是，你不能同时在同一区域（即，你不能有占用相同的空间或重叠的两个元素）。

解决方案

对于有与在它上面没有文字的图像区域，电子邮件的那一部分可以切割为单独的前景图像。

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

剪切文本作为图像的一部分。这伤害了电子邮件的可用性，这是谁拥有默认情况下禁用（因为它们最初不会看到文本）图像的用户尤其有问题。
显示图像作为背景图像，以理解的Outlook 2007+的用户将无法看到图像（优雅降级）。
不要试图在任何电子邮件阅读器显示的背景图像。

适可而止，选项1通常安全，合理。但是，大量使用时，它会导致图像非常高的比例在电子邮件到文本，这可能引发一些垃圾邮件过滤器。大量使用的选项＃1之前，在各种垃圾邮件过滤器的测试电子邮件。

之前的选项＃2或＃3前，用户可能需要与设计师以清除它（作为一个妥协的设计在Outlook 2007+）。在更大的画面，背景图片应谨慎设计电子邮件时使用。它可能有助于指出的设计师使用背景图像的影响。

Answer 2:

除非你使用VML Outlook只支持在body标签的背景图像。检查了这一点对于VML： http://backgrounds.cm/

下面是一个例子的它在人体内标签的工作。

Answer 3:

我想你会觉得这很方便： http://www.campaignmonitor.com/css/

展望2007-13不支持background-image属性，所以没有解决这个没有什么好的办法。

根据个人经验：要获得跨越的电子邮件客户端的最一致的体验，我会重新设计的电子邮件不需要的背景图像。

Answer 4:

background-image不是在Outlook或Gmail支持的Android 2.3。请参阅： http://www.campaignmonitor.com/css/

我通常使用background-color作为备用，或者如果背景图像是必要的，使图像的文本部分。

Answer 5:

您可以使用正确的VML做到这一点。下面codepiece最适合我：

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

Answer 6:

背景图片不会在Outlook支持2007+使用VML（矢量标记语言（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特定CSS放在这里。 * /

'MSO 9'是Office 2000中的Outlook 2000 - 9版的Outlook 2002 - 10版的Outlook 2003 - 11版的Outlook 2007 - 12版的Outlook 2010 - 14版的Outlook 2013 - 15版http://templates.mailchimp.com/development/css /前景-条件CSS /

Answer 7:

我们可以添加这样： -

添加以下权起始标签之后...

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

Answer 8:

2018年10月 - 测试在Outlook 2016

想我会附和与VML片段，为我工作。来自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片段工作的程度，但我曾与图像离开电子邮件和回来，或者不加载的背景下用户点击后才消失的问题。

Answer 9:

我刚刚遇到这个问题，同时创造MailChimp批量电子邮件使用者模板。

虽然Outlook客户端软件只允许body标签的背景，这些都是通过网络邮件的网站，如Outlook Web邮件（Hotmail等）时，Gmail等剥离出来

同样也是恰好相反... Outlook客户端剔除表格背景图片，而网络邮件客户端允许表的背景。

解决方法：使用两种：

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

在Mailchimp本身，这似乎错误地显示 - 你可以看到围着桌子背景的边缘体底的边缘，而是由时间到达接收者，无论是一个或另一个，这取决于它们是否是被剥离使用Outlook客户端软件或Hotmail / Gmail网络邮件。

我还没有尝试这种在其他邮件客户端程序或网络邮件，所以我不知道是否有其他人会同时显示。如果有人试图这种方法与其他电子邮件客户端软件或比Gmail或Hotmail其他网络邮件，我会非常想知道，如果此修订是普遍的。

文章来源: Background images not working in Outlook 2007 and later

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

闹够了就滚

女 | 书童

私信

收藏的人(0)

Ta的文章更多文章

0条评论

还没有人评论过~