html - Outlook 不呈现背景图像 css 属性

Question

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

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

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

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