Question

我知道Windows Outlook中不允许使用 background-image ，您可以查看以下内容：

background-image: url(image);

CSS Support Guide for Email Clients

对于Windows Outlook，背景标记也不可读：

background="image"

还有其他方法可以将图片置于某些内容之下吗？

Answer 1

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

Outlook需要使用VML渲染背景图像。内容可以照常构建。

Answer 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:shape>而不是<v:rect>，并使用0不透明度填充它。像这样的VML已被用于重复背景图像，但它也适用于此。

Windows Outlook的Webmail背景图片

2 个答案: