Question

我正在设计一个在某个位置有背景图像的HTML电子邮件。它在GMail和Yahoo中运行良好。但是图像不会显示在Outlook中。我也在使用VML。但没有任何帮助。以下是我到目前为止的尝试。

这是背景中的图像：

<td class="content-wrapper" style="width: 100%;background: url(https://gallery.mailchimp.com/0135a40176b33deb024da1fea/images/5d40da6e-256c-4191-a9b8-d69ca8e49f46.png) repeat-y 97.5% 0;">
 <!--[if gte mso 9]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" background-repeat:repeat-y; position: 97.5% 0;">
       <v:fill type="tile" src="https://gallery.mailchimp.com/0135a40176b33deb024da1fea/images/5d40da6e-256c-4191-a9b8-d69ca8e49f46.png" color="#ffffff" />
        <![endif]-->       
                     <!--<div>-->
         ********************contents here**********************
      <!--</div>-->
        <!--[if gte mso 9]>
        </v:textbox>
        </v:rect>
        <![endif]-->

但是前景没有发生。请建议我使用最佳和优化的解决方案

Answer 1

这是我用于背景图片的Outlook修复，为具有背景的按钮设置。您需要为此托管您使用的图片，并且该网址必须位于VML中<td>和src=的背景属性中。由于这是我使用的模板，宽度和高度需要在任何地方提及，并且可以在HTML和VML中应用背景颜色。（然后在修复程序中有一个表，您可以在其中放置更多HTML，如图像等。）

<!--Button-->
<td width="" height="" align="center" valign="top">
<table width="" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="http://dummyimage.gif" bgcolor="#c81400" width="" height="" align="center" valign="top">
        <!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:px;height:px;">
<v:fill type="frame" src="http://dummyimage.gif" color="#c81400" />
<v:textbox inset="0,0,0,0">
<![endif]-->
            <table width="" align="center" border="0" cellpadding="0" cellspacing="0">

            </table>
        <!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
    </td>
</tr>
</table>
</td>
<!--End button-->

注意：请注意，如果您在背景图片中有背景图片（它会工作但会破坏所有内容），此代码将无法在Outlook中运行，您需要更复杂的VML。

Answer 2

您需要将宽度和高度应用于VML对象：

<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"
style="height:100px; width:100px;">

您应用的背景重复和位置将无效。 VML对象不是背景，它们只是通过创建对象并将其放在内容下面来模仿背景。它是一种有效但有限的方法。

如果您需要移动对象，请尝试将背景图片切片，使其在您想要移动的一侧留出空间。

默认情况下，它会在x轴和y轴上重复显示，你无法控制它。

您可以为Outlook背景提供不同的图像，以便在其他任何地方使用。只需在VML对象中使用不同的图像路径，就可以在background上的td属性中使用。

另请注意，outlook.com和AOL需要background=""属性中指定的背景，如果您将其指定为css背景（style="background:url();"），则无法使用。

希望这有帮助。

背景图像在Outlook EMail中的固定位置

2 个答案: