Outlook 不呈现背景图像 css 属性答案

【问题标题】：Outlook not rendering background-image css propertyOutlook 不呈现背景图像 css 属性
【发布时间】：2020-01-15 11:22:55
【问题描述】：

当用户在我的应用程序上创建帐户时，他们会收到一封包含凭据的电子邮件。

这封电子邮件包含两张图片，一张带有徽标，另一张作为背景图片。

在outlook中渲染的logo没有问题，程序如下：

<img align="center" alt="" src="https://gallery.mailchimp.com/......">

背景图则相反，outlook中不渲染，编程如下：

background-image:url("https://gallery.mailchimp.com/......");

是否有解决方案可以将 css 属性 background-image 替换为 <img> html 标记并仍将图像保留在背景中？

更新 1

背景图片所在的 HTML：

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" id="templateHeader" data-template-container>

id = "templateHeader"的css：

#templateHeader{
            background-color:#F7F7F7;
            background-image:url("https://gallery.mailchimp.com/......");
            background-repeat:no-repeat;
            background-position:center;
            background-size:cover;
            border-top:0;
            border-bottom:0;
            padding-top:45px;
            padding-bottom:45px;
        }

【问题讨论】：

你能告诉我们应该显示背景图像的 HTML，以及用于应用背景图像的选择器吗？
@eskwayrd 更新了问题
看起来你的 HTML+CSS 是正确的。但是，看起来某些版本的 OutLook 不支持 background 样式，根据：campaignmonitor.com/css/color-background/background-image
@eskwayrd 我已经知道了，我要求更换“背景”
一种可行的策略是在表格单元格中放置两个图像，并应用定位和 z-index 来实现您正在寻找的工作。

标签： html css image outlook background-image

【解决方案1】：

解决您的问题的一个可能方法是：将您的 <table> 包装在 <div> 中，然后在 <td align="center" valign="top" id="templateHeader" data-template-container> 中，而不是将 background-image 图像放在单独的 CSS 文件中，直接使用 background:url() ：

<td style="background:url("https://gallery.mailchimp.com/......"); top center /cover repeat;" align="center" valign="top" id="templateHeader" data-template-container>

如果您也想使用 CSS 文件对其进行测试：（已测试并正常工作）

#templateHeader{
            background: url("https://gallery.mailchimp.com/......");
            background-repeat:no-repeat;
            background-position:center;
            background-size:cover;
            border-top:0;
            border-bottom:0;
            padding-top:45px;
            padding-bottom:45px;
        }

【讨论】：

之前试过这种方法，不行，Outlook 2016桌面不支持任何背景属性。
我说的是最近的... Outlook express... 为什么您希望它在以前的 Outlook 上工作？
商业世界。并非每个客户都拥有最新版本的 Outlook，其中一些客户被困在 Outlook 2003 上（谢天谢地，它在那个版本中工作）。我不能编程认为每个人都在使用最新的软件。这不是每个人的正常商业应用程序，它是一个特定于业务的工具。 @mindmaster

【解决方案2】：

您可以使用此代码

       body {
            margin: 0;
            padding: 0;
        }        
        #templateHeader{
            background-color:#F7F7F7;
            background-image:url("https://d1cr57qij2cwzh.cloudfront.net/wp-content/uploads/2017/11/EOA_OutlookImageSupport_Blog-1200x675.jpg");
            background-repeat:no-repeat;
            background-position:center;
            background-size:cover;
            border-top:0;
            border-bottom:0;
            padding-top:250px;
            padding-bottom:250px;
        }

    <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td align="center" valign="top" id="templateHeader" data-template-container></td>
        </tr>
    </table>

【讨论】：