html电子邮件背景图像样式未显示

问题描述:

我正在创建一个电子邮件模板,它必须显示来自外部网站的图像。我已经放置了一些用于渲染图像的<img>标签,并且在元素的内联CSS中设置了一些带背景图像属性的<td>标签。html电子邮件背景图像样式未显示

现在,当在Outlook中接收到电子邮件时,图像不会显示(因为图像未嵌入,所以这是预期的)。然后点击下载图像正确查看图像。仅显示<IMG>标记中的图像,并且不呈现<TD>的背景图像。

解决此问题的任何意见?

谢谢!

+0

究竟如何设置背景图片的财产? – amosrivera 2011-01-15 05:43:27

最后我找到了答案。

Outlook 2007不使用Internet Explorer的呈现引擎来加载HTML内容。相反,它使用Word 2007 HTML和CSS功能。

由于此CSS属性(如背景图像)不受支持。因此,无法使用标准CSS标签为Outlook中的HTML元素设置背景图片。

更多信息,请访问http://msdn.microsoft.com/en-us/library/aa338201(v=office.12).aspx

背景图片在Outlook中不支持。作为最佳做法,您绝不应在HTML电子邮件中使用背景图像。如果您必须拥有背景,则可以使用并为PLUS增加一个纯色。那些支持背景图像的电子邮件客户端将获得图像,而那些不支持背景图像的将会回到纯色。

此外,这是来自Campaign Monitor的指南:http://www.campaignmonitor.com/css/这对我来说非常有帮助。

实际上有一种方法可以在Outlook中使用HTML电子邮件中的背景图像。

正如Chaitanya所言,它不能用CSS来完成,但它可以通过VML完成。

该技术比使用background: url(....)有一点涉及,我不会像使用CSS技术那样频繁使用它(如果它在Outlook中工作的话)。但它非常有用。

我已在多个广告系列上成功使用过它。

完整说明:包括支持此技术的电子邮件客户端列表。

http://www.campaignmonitor.com/forums/viewtopic.php?pid=14197

有显示HTML图像的方式。

正确的HTML电子邮件呈现为Outlook中的MSWord文档。

我从这个https://*.com/a/12693917/413032后得到了解决办法。

所以我们需要一个备用。

事实上,您可以在MSWORD中打开您的html电子邮件,并找出看起来不对的地方,并考虑可以作为替代品的想法。

这是我做的;

  1. 新增v命名空间中的HTML标签

    < html xmlns:v="urn:schemas-microsoft-com:vml" 
    
  2. 新增v的风格头块

    <head> 
    <style type="”text/css”"> 
         v\:* { behavior: url(#default#VML); display:inline-block} 
    </style> 
    
  3. 在表或者需要添加您的MSWord替代

    <table style="background-image: url('https://e-telesaglik.com/images/email/canvas-bg.jpg');background-repeat:no-repeat;" cellpadding="0" width="960"> 
          <!--[if gte vml 1]> 
            <v:shape 
             stroked='f' 
             style='position:absolute;margin-left:-90pt;margin-top:-1.55pt;  
               z-index:-503306481; 
               visibility:visible; 
               width:720pt; 
               height:475pt;   
               top:0; 
               left:0; 
               border:0;            
               '> 
             <v:imagedata src="https://e-telesaglik.com/images/email/canvas-bg.jpg"/> 
            </v:shape> 
          <![endif]--> 
           <tbody> .... 
    

就是这样。 确定它会是MSWord渲染。更多,正如你注意到我们使用绝对定位...

无论如何,这是一种解决方法,并以某种方式解决问题。 我们希望有一天MS-Outlook可以使用不带MS-Word的网页浏览器呈现html电子邮件。

此作品在Gmail,

我尝试这样做,以显示与电子邮件通讯图像格,尝试inline css,发送电子邮件指引here