位于 Outlook 底部的 VML 背景图像

Question

我正在创建一封电子邮件，它必须在 Outlook 上看起来不错。在电子邮件中，我有一段文字（高度为324px），我需要在该段落底部放置背景图像（高度：153px）。

我现在有以下代码：

<td align="center" valign="top" background="background.png" style="background-repeat: no-repeat;background-position:bottom;background-size: contain;" height="324" bgcolor="#ffffff">
      <!--[if gte mso 9]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 620px;height: 153px;">
        <v:fill type="frame" src="background.png" color="#ffffff"  />
      <![endif]-->
      Body Text here
    <!--[if gte mso 9]>
      </v:rect>
      <![endif]-->
    </td>

目前的问题是：

背景图片未按比例绘制。它被拉伸到整个段落的高度。
我不确定如何将它放在段落的底部。

任何擅长 VML 的人都可以帮我解决这个问题吗？非常感谢！

Answer 1

你可能需要在这个问题上跳出框框思考 ;)

选项 (A)，根据

创建具有所需高度的背景图像

选项(B)，把大部分内容放在VML上面，VML部分只有几行。这样 VML 部分不会拉伸，但您仍然会得到效果，即：

<td align="center" valign="top" background="background.png" style="background-repeat: no-repeat;background-position:bottom;background-size: contain;" height="324" bgcolor="#ffffff">
<p>Body text here</p>
      <!--[if gte mso 9]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 620px;height: 153px;">
        <v:fill type="frame" src="background.png" color="#ffffff"  />
      <![endif]-->
      Part of body Text here
    <!--[if gte mso 9]>
      </v:rect>
      <![endif]-->
    </td>

Answer 2

我认为你应该在 v:fill 上使用 aspect、position 和 origin 属性。那种模拟背景：中心底部包含来自 css:

<td align="center" valign="top" background="background.png" style="background-repeat: no-repeat;background-position:bottom;background-size: contain;" height="324" bgcolor="#ffffff">
      <!--[if gte mso 9]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 620px;height: 153px;">
        <v:fill origin="0,0.5" position="0,0.5" aspect="atmost" type="frame" src="background.png" color="#ffffff"  />
      <![endif]-->
      Body Text here
    <!--[if gte mso 9]>
      </v:rect>
      <![endif]-->
    </td>

位于 Outlook 底部的 VML 背景图像

VML background image positioned on bottom for Outlook

html

email

outlook

vml

html-email