【问题标题】:Email template - table background image not displaying in MS Office Outlook 365电子邮件模板 - MS Office Outlook 365 中未显示表格背景图像
【发布时间】:2020-02-14 06:22:45
【问题描述】:

出于电子邮件模板的目的,我需要在<table> 中实现背景图像,并在图像上包含文本。现在我试过了:

https://*.com/a/15620571/6191987

<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="http://i.imgur.com/n8Q6f.png" color="#f6f6f6"/>
</v:background>
<![endif]-->

最新版本的 MS Outlook (Version 16005.11029.20108.0 & Version 1908 Build 11929.20562) 无法使用,

但在旧版本上工作正常。

有什么新方法可以解决这个问题吗?

【问题讨论】:

    标签: html css email outlook


    【解决方案1】:

    您是否尝试过在您的 html 标签中声明 VML 有这个?

    <html lang="en" xmlns="http://www.w3.org/1999/xhtml"
            xmlns:v="urn:schemas-microsoft-com:vml"
            xmlns:o="urn:schemas-microsoft-com:office:office">
    

    还有你的 bg img 的尺寸是多少? Outlook 的最大 img 高度为 1728px,如果超过该高度,则不会显示图像。 如果 bg img 是retina 则无法正确显示。

    【讨论】:

    • 是的..这有帮助,但需要在表格内添加一些条件&lt;!--[if gte mso 9]&gt; 我添加了一个答案,可以帮助我解决整个问题。
    【解决方案2】:

    找到了这个解决方案

    发件人:https://litmus.com/community/discussions/357-outlook-07-13-full-width-background-image

    这适用于 Outlook、Office 365、Gmail 等,也适用于普通和 4k 屏幕。

    <!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word">
    
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="format-detection" content="telephone=no" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta name="apple-mobile-web-app-capable" content="yes" />
      <meta name="apple-mobile-web-app-status-bar-style" content="black" />
      <title>Test</title>
      <style>
        v\:* {
          behavior: url(#default#VML);
          display: inline-block
        }
        
        o\:* {
          behavior: url(#default#VML);
          display: inline-block
        }
        
        w\:* {
          behavior: url(#default#VML);
          display: inline-block
        }
        
        body {
          margin: 0;
          padding: 0;
          width: 100%;
          -webkit-text-size-adjust: none !important;
          -ms-text-size-adjust: none !important;
        }
      </style>
    
      <!--[if gte mso 9]><xml>
     <o:OfficeDocumentSettings>
      <o:AllowPNG/>
      <o:PixelsPerInch>96</o:PixelsPerInch>
     </o:OfficeDocumentSettings>
    </xml><![endif]-->
    
    </head>
    
    <body style="padding: 0; margin: 0; -webkit-text-size-adjust: none !important;color:#fff;font-family:sans-serif;font-size: 18px;">
      <table cellspacing="0" cellpadding="0" border="0" bgcolor="#0058a5" width="100%">
        <tr>
          <td height="50">&nbsp;</td>
        </tr>
      </table>
      <table width="100%" cellspacing="0" cellpadding="0" border="0">
        <tr>
          <td height="150" bgcolor="#0086cc" background="http://i.imgur.com/HzZCJei.png" style="height: 150px;" align="center">
            <!--[if gte mso 9]>
            <v:rect stroke="f" fill="t" style="mso-width-percent: 1000;height:150px; position: relative; z-index: 0; mso-width-relative:margin;">
            <v:fill type="frame" src="http://i.imgur.com/HzZCJei.png" color="#0086cc" />
            </v:rect>
            <![endif]-->
            Text goes here!
          </td>
        </tr>
      </table>
    </body>
    
    </html>

    【讨论】: