代码之家 › 专栏 › 技术社区 › Mike Marks

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

html-email outlook email

Mike Marks · 技术社区 · 7 年前

我已经创建了一个基于HTML的电子邮件,其中一个元素定义了一个“background image”属性。在Outlook中发送和接收电子邮件时,不会显示背景图像。当它在Gmail中被接收时,它就会出现。我认为这可能与特定于前景的限制有关?这是HTML代码:

<div style=“text-align:center;background-image:url('http://image.info.geha.com/lib/fe44157075640479741475/m/1/34273cbe-2375-4a73-aec2-5151bf51cf91.jpg');边框颜色:e3e4e5”>
<p style=“Align:Center;Bottom:50px;Left:100(左:100)
PX;
& BR>
<SPAN style=“color:500778;”><SPAN style=“FONT SIZE:20px;”>GEHA独家配件</SPAN><br>
<span style=“FONT SIZE:18px;”>uuuuuuult;/span>/lt;/span><br>
& BR>
& BR>
<SPAN style=“color:ee7623;”><U><SPAN style=“FONT SIZE:18px;”><A HREF=“”>此处显示网站内容的链接</A></SPAN></U></SPAN><BR>
& BR>
<SPAN style=“color:ee7623;”><u><SPAN style=“FONT SIZE:18px;TEXT ALIGN:center;”><a href=“”>此处显示网站内容链接</a>/lt;/SPAN></u>/lt;/SPAN><br>
& BR>
<SPAN style=“display:none;”gt;&nbsp;/SPAN><SPAN style=“color:ee7623;”gt;<U><SPAN style=“FONT SIZE:18px;TEXT ALIGN:center;”><A HREF=“”>此处显示网站内容的链接</A></SPAN>/U></SPAN><BR>
& BR>
& BR>
& BR>
<SPAN style=“display:none;”>&nbsp;/SPAN></P></DIV>
< /代码> 

以下是Outlook的呈现:



下面是Gmail的渲染:



你知道为什么吗?

<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的渲染:



你知道为什么吗?

2 回复 | 直到 7 年前

K K 7 年前

Outlook 2000-03支持背景图像,因为它们使用Internet Explorer作为渲染引擎。然而,在2007-16年的展望中,他们转向了微软的Word,这让他们非常痛苦。

除非使用vml,否则Outlook 07-16将不支持背景图像。活动监视器有一个很好的工具来构建代码: https://backgrounds.cm/

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

有关哪些浏览器支持哪些内容的任何其他问题,请使用以下列表: https://www.campaignmonitor.com/css/color-background/background-image/

Mike Marks 7 年前

这是我为解决这个问题所做的

<!- [如果MSO ] & GT;
<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独家配件</SPAN><br>
<span style=“FONT SIZE:18px;”>uuuuuuult;/span>/lt;/span><br>
& BR>
& BR>
<SPAN style=“color:ee7623;”><u><SPAN style=“FONT SIZE:18px;”>此处显示网站内容的链接</SPAN></u></SPAN><br>
& BR>
<SPAN style=“color:ee7623;”><u><SPAN style=“FONT SIZE:18px;TEXT ALIGN:center;”>此处显示网站内容的链接</SPAN></u>/lt;/SPAN><br>
& BR>
<SPAN style=“display:none;”gt;&nbsp;/SPAN><SPAN style=“color:ee7623;”gt;<U><SPAN style=“FONT SIZE:18px;TEXT ALIGN:center;”gt;此处显示网站内容的链接</SPAN>/U></SPAN><br>
& BR>
& BR>
& BR>
<SPAN style=“display:none;”>&nbsp;/SPAN></P></DIV>

</v:roundrect>
&![endif]——><!——如果!MSO & GT;&!--><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;背景:e3e4e5;边框颜色:e3e4e5“>
& BR>
<SPAN style=“color:500778;”><SPAN style=“FONT SIZE:20px;”>GEHA独家配件</SPAN><br>
<span style=“FONT SIZE:18px;”>uuuuuuult;/span>/lt;/span><br>
& BR>
& BR>
<SPAN style=“color:ee7623;”><u><SPAN style=“FONT SIZE:18px;”>此处显示网站内容的链接</SPAN></u></SPAN><br>
& BR>
<SPAN style=“color:ee7623;”><u><SPAN style=“FONT SIZE:18px;TEXT ALIGN:center;”>此处显示网站内容的链接</SPAN></u>/lt;/SPAN><br>
& BR>
<SPAN style=“display:none;”gt;&nbsp;/SPAN><SPAN style=“color:ee7623;”gt;<U><SPAN style=“FONT SIZE:18px;TEXT ALIGN:center;”gt;此处显示网站内容的链接</SPAN>/U></SPAN><br>
& BR>
& BR>
& BR>
<SPAN style=“display:none;”>&nbsp;/SPAN></P></DIV><!&![Endof ] -gt;
< /代码> 

它在Outlook中生成了以下内容(不允许出现紫色条)。它只是屏幕截图的一部分,下一个元素):。

它在Outlook中生成了以下内容(不允许出现紫色条)。它只是屏幕截图的一部分,下一个元素):