Question

我正在创建一个电子邮件模板，该模板必须显示来自外部网站的图像。我放置了一些用于渲染图像的<img>标记，并且有一些<td>标记，其背景图像属性设置在元素的内联css中。

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

有关解决此问题的任何意见吗？

谢谢！

Answer 1

最后我找到了答案。

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

提供了更多信息

Answer 2

Outlook不支持背景图像。作为最佳实践，您绝不应在HTML电子邮件中使用背景图像。如果您必须有背景，则可以使用和图像加上纯色。那些支持背景图像的电子邮件客户端将获得图像，而那些不支持它的图像将恢复为纯色。

Answer 3

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

正如Chaitanya所说，它可以用CSS完成，但可以通过VML完成。

该技术比使用background: url(....)更复杂，我不会像使用CSS技术那样经常使用它（如果它在Outlook中工作）。但它非常有用。

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

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

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

Answer 4

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

Answer 5

有一种显示HTML图像的方法。

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

我从这个https://stackoverflow.com/a/12693917/413032帖子中得到了解决方案。

所以我们需要一个替代品。

事实上，您可以在MSWORD中打开您的html电子邮件并找出错误的内容并考虑可以作为替代方案提供的想法。

这就是我的所作所为;

将v命名空间添加到html标记

  < html xmlns:v="urn:schemas-microsoft-com:vml"

为头部块添加了v的样式

< head >
 <style type="”text/css”">
       v\:* { behavior: url(#default#VML); display:inline-block}
 </style>

在表格中或您需要添加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电子邮件。

Answer 6

这适用于Gmail，

我尝试过在电子邮件简报中显示带有图片的div，尝试inline css，发送电子邮件指南here

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

6 个答案: