Outlook无法呈现背景图像CSS属性

Question

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

该电子邮件包含两个图像，一个图像带有徽标，另一个图像作为背景图像。

徽标确实可以在Outlook中呈现，并且它没有问题，它的编程方式如下：

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

背景图像则相反，它不会在Outlook中呈现，并且其编程如下：

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

有没有一种解决方案，可以用<img> html标签替换css属性background-image并仍然将图像保留在背景中？

更新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;
        }

Answer 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;
        }

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