CSS背景图像“图像”未在Outlook中显示

Question

我已经创建了一个基于HTML的电子邮件，并且其中的一个元素定义了“ background-image”属性。在Outlook中发送和接收电子邮件时，不会显示背景图像。在Gmail中收到邮件后，它就会显示出来。我认为这可能与Outlook的特定限制有关？这是HTML代码：

<div style="text-align: center; background-image:url('http://image.info.geha.com/lib/fe44157075640479741475/m/1/34273cbe-2375-4a73-aec2-5151bf51cf91.jpg'); border-color:#e3e4e5">
 <p style=" align: center; bottom: 50px; left: 100
px;">
  <br>
  <span style="color:#500778;"><span style="font-size:20px;">GEHA EXCLUSIVES</span><br>
  <span style="font-size:18px;">______</span></span><br>
  <br>
  <br>
  <span style="color:#ee7623;"><u><span style="font-size:18px;"><a href="#">Link to website content goes here</a></span></u></span><br>
  <br>
  <span style="color:#ee7623;"><u><span style="font-size: 18px; text-align: center;"><a href="#">Link to website content goes here</a></span></u></span><br>
  <br>
  <span style="display: none;">&nbsp;</span><span style="color:#ee7623;"><u><span style="font-size: 18px; text-align: center;"><a href="#">Link to website content goes here</a></span></u></span><br>
  <br>
  <br>
  <br>
  <span style="display: none;">&nbsp;</span></p></div>

这是Outlook的呈现：

这是Gmail的呈现：

有什么想法吗？

Answer 1

Outlook 2000-03支持背景图像，因为它们使用Internet Explorer作为其渲染引擎。但是，使用Outlook 2007-16时，他们切换到了Microsoft Word，这使它们绝对无法承受。

除非使用VML，否则Outlook 07-16将不支持背景图像。 Campaign Monitor有一个不错的工具来构建该代码：https://backgrounds.cm/

另一个选择是在div上使用bgcolor属性。 Outlook 07-16是唯一仍支持该功能的电子邮件浏览器。所有其他浏览器都将使用您的背景图片。您不会有圆角，但是灰色背景会在那里。

对于有关哪些浏览器支持什么的任何其他问题，请使用以下列表：https://www.campaignmonitor.com/css/color-background/background-image/

Answer 2

这就是我要解决的问题

<!--[if mso]>
    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="width:600;height:257;" arcsize="10%"  fillcolor="#e3e4e5" strokecolor="#ffffff">
<div style="text-align:center;">
 <p align="center" style="bottom:50px; left:100px;">
<br>
  <span style="color:#500778;"><span style="font-size:20px;">GEHA EXCLUSIVES</span><br>
  <span style="font-size:18px;">______</span></span><br>
  <br>
  <br>
  <span style="color:#ee7623;"><u><span style="font-size:18px;">Link to website content goes here</span></u></span><br>
  <br>
  <span style="color:#ee7623;"><u><span style="font-size: 18px; text-align: center;">Link to website content goes here</span></u></span><br>
  <br>
  <span style="display: none;">&nbsp;</span><span style="color:#ee7623;"><u><span style="font-size: 18px; text-align: center;">Link to website content goes here</span></u></span><br>
  <br>
  <br>
  <br>
  <span style="display: none;">&nbsp;</span></p></div>

    </v:roundrect>
    <![endif]--><!--[if !mso]><!--><div style="text-align: center;">
 <p style="border-radius:25px; -moz-border-radius: 25px; -webkit-border-radius: 25px; border-style:solid; align: center; bottom: 50px; left: 100
px; background:#e3e4e5; border-color:#e3e4e5">
  <br>
  <span style="color:#500778;"><span style="font-size:20px;">GEHA EXCLUSIVES</span><br>
  <span style="font-size:18px;">______</span></span><br>
  <br>
  <br>
  <span style="color:#ee7623;"><u><span style="font-size:18px;">Link to website content goes here</span></u></span><br>
  <br>
  <span style="color:#ee7623;"><u><span style="font-size: 18px; text-align: center;">Link to website content goes here</span></u></span><br>
  <br>
  <span style="display: none;">&nbsp;</span><span style="color:#ee7623;"><u><span style="font-size: 18px; text-align: center;">Link to website content goes here</span></u></span><br>
  <br>
  <br>
  <br>
  <span style="display: none;">&nbsp;</span></p></div><!-- <![endif]-->

在Outlook中产生了以下内容（请不要注意紫色栏。它只是屏幕截图的一部分，下一个元素）：