Windows Outlook 的 Webmail 背景图像答案

【问题标题】：Webmail background image for windows outlookWindows Outlook 的 Webmail 背景图像
【发布时间】：2017-03-02 14:45:12
【问题描述】：

我知道 background-image 在 windows Outlook 中是不允许的，您可以在下面查看：

background-image: url(image);

CSS Support Guide for Email Clients

另外，背景标签对于 Windows Outlook 不可读：

background="image"

有没有其他方法可以将图像放在某些内容下？

【问题讨论】：

标签： html css outlook background-image html-email

【解决方案1】：

https://backgrounds.cm/ 是你最好的朋友。

Outlook 需要使用 VML 来呈现背景图像。内容可以正常构建在此之上。

【讨论】：

这确实是最好的答案，因为它是一个很棒的工具，可以做你想做的事。
您是否尝试过上述 URL 中的“单个表格单元格”选项？另外请在您的原始帖子中粘贴一些代码，以便我们查看。

【解决方案2】：

虽然 backgrounds.cm 是一个很好的资源，涵盖了很多基础，但我认为 Campaign Monitor 不会对其进行更新并且它已经过时了。

尝试使用这样的 VML 代码：

<!--[if gte mso 9]>
   <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style="behavior: url(#default#VML); display: inline-block; position: absolute; width: 640px; height: 300px; top: 0; left: 0; border: 0; z-index: 1;" src="http://media.lt02.net/1/Users/28501/Emmet/background.jpg" />                             
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="display: inline-block; position: absolute; width: 640px; height: 300px; top: 0; left: 0; border: 0; z-index: 2;">
    <v:fill opacity="0%" style="z-index: 1;"/> 
    <div>                       
    <![endif]--> 

        Table Contents

    <!--[if gte mso 9]>   
    </div>
    </v:fill>
    </v:rect>
<![endif]-->

这与标准 VML 背景图像之间的主要区别在于，我们使用的是 <v:rect> 而不是 <v:rect> 并用 0 不透明度填充它。像这样的 VML 已用于重复背景图像，但它也适用于此。

【讨论】：