Question

我在html电子邮件中使用VML作为背景图片。尽管VML对象中存在“无重复”值，但背景在MSO 12,14和15中重复。代码如下：

<td align="center" valign="top" style="background-image: url('http://secure.sportssystems.com/eventdata/6389/images/APIInviteBackground.jpg'); background-repeat:no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: top center;">
    <xsl:comment><![CDATA[[if gte mso 9]>
        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="background-repeat: no-repeat; mso-width-percent:1000; height:775px; top: 0; left: 0; border: 0;z-index: 1">
             <v:fill type="tile" src="cid:http://.../myimage.jpg" />
    <![endif]]]></xsl:comment>

我也尝试过使用v：background：

<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t" style="background-repeat: no-repeat; mso-width-percent:1000; height:775px;">
    <v:fill type="tile" src="cid:http://secure.sportssystems.com/eventdata/6389/images/APIInviteBackground.jpg" />
</v:background>

但后来我没有背景。我会继续插电，因为我觉得解决方案很简单，但是会感激任何帮助......

Answer 1

将<v:fill type="tile"更改为<v:fill type="frame"，并确保您的矩形与td相同。使用MSO-width-percent可能会在一定程度上出现问题。因为它只会在桌面版本上呈现，所以你应该没有真正的问题声明这个条件代码的预设值，我建议这样做。

Answer 2

将size元素中的<v:fill>属性指定为＆＃34; 100％，100％＆＃34;我能够让我的图像伸展而不是重复。

在打开body标记后立即输入以下代码：

<body>
<div>
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="true">
    <v:fill type="tile" size="100%,100%" src="http://image.mail.minacsmarketing.com/lib/fe9912727d65017d75/m/1/test-bg.jpg"/>
</v:background>
<![endif]-->
    <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr><td>

然后在结束body标记之前使用以下代码关闭代码：

    </td></tr>
    </table>
</div><!--/end container div-->
</body>

注意：您的问题适用于Outlook 2007及更高版本，对此有效。此解决方案不适用于Outlook.com电子邮件，因为它们不支持VML代码。

Answer 3

Outlook使用Word作为电子邮件编辑器。您可以在以下系列文章中找到支持和不支持的HTML元素，属性和级联样式表属性：

如何防止背景图像在Outlook 2007及更高版本中重复出现

3 个答案: