Html Outlook VML，模拟CSS重复/定位

对于我们的电子邮件模板，我们目前正在使用下面的代码在某些Outlook版本中启用背景，然而，我一直在尝试围绕VML展开讨论，看看是否有可能在某种程度上模拟CSS属性，但我在VML上找到的一点信息似乎不完整或很难放到上下文中

在实践中，基本上只有两个主要感兴趣的属性，即水平居中和仅重复x。我会假设这些都是如此基本的VML应该很容易支持它，但我不明白它似乎

<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="..." color="#000000"/>
</v:background>
<![endif]-->

---

据我所知，VML

background

标签很难使用。它们看起来不是很灵活，我不确定你会有多幸运尝试像处理CSS元素一样操纵它们

这就是说，

shape

和

image

标记看起来更加合作（相对于它们的VML对应项）。我在这个主题上发现的最有趣的文章是：

这篇文章说的是，Outlook在遇到CSS属性时往往会丢弃它们（正如您毫无疑问地发现的那样）。然后，它为应用（基于图像的）背景提供了两个备选选项：

在HTML的

标记上通过CSS设置背景图像。Outlook显然接受这一点

使用VML

现在，本文将讨论如何将背景应用于表格单元格，但是它所使用的技术应该同样适用于在其他上下文中应用背景。（最坏的情况下，你甚至可以考虑使用一个表，如果它得到了你正在进行的视觉布局）。 总之，本文作者使用的VML是：

<!--[if gte mso 9]>
    <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); (+ more CSS)' src="background url" />
    <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); (+ more CSS)'>
    <div>
<![endif]-->
<!-- An HTML table -->
<!--[if gte mso 9]>
    </div>
    </v:shape>
<![endif]-->

因此，如果您决定使用图像，您只需在图像标记本身上直接定义CSS属性即可。您的另一个选择是使用

形状

，这可能更适合您，因为您似乎希望使用计算的背景。在这种情况下，根据此处的规范：

VML形状和组元素完全参与CSS2视觉渲染模型

在这种情况下，与上面的示例一样，您应该可以使用

style

标记（如上面的示例所示）将CSS属性应用于形状元素。这应该可以解决你的背景重复问题

关于定心，规范规定如下：

中心x，中心y

这些特性可用于指定块级别的中心 元素在其父容器框中的框

这将为您解决水平居中问题。供参考

形状和组元素包含用于其内容的块-它们定义了CSS2“块级别框”

---

…因此，某些布局问题应通过应用包含

形状

或

组

元素来解决。

非常感谢！我希望可以将其设置为“适当的”背景，但在我自己进行了一点测试之后，正如您所建议的，这显然是不可能的。我使用的是上述方法，我遇到了表格中文本不可见的问题。我使用了使用

rect

的方法，它解决了我的问题。