展望VML，模仿CSS重複/定位

對於我們的電子郵件模板，我們目前使用下面的代碼在某些Outlook版本中啓用背景，但是，我一直試圖圍繞VML包裝我的頭，以查看是否可以模擬CSS屬性在某種程度上，但我在VML上發現的一點信息似乎不完整或很難放入上下文中。展望VML，模仿CSS重複/定位

實際上，基本上只有兩個屬性，主要是感興趣的，水平居中的，並且只有repeat-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]-->

來源

2012-11-30 Andreas

從我可以挖，VML background標籤難以奏效。他們看起來不太靈活，我不確定你有多少運氣來試圖操縱他們，就像你會CSS元素一樣。

也就是說，shape和image標籤看起來更合作（相對於他們的VML對應）。我在這個主題上找到的最有趣的文章是：http://iamskwerl.com/tech/2011/11/html-emails-outlook-and-background-images/

這篇文章說的是，當Outlook遇到它們時（如你毫無疑問發現的），它往往會拋棄CSS屬性。然後，它提供了兩個備選方案的應用（基於圖像的）背景：

通過CSS對HTML的標籤<body>設置一個背景圖像。展望顯然接受這一點。
使用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屬性標記自己。您的其他選擇是使用shape，因爲您似乎想要使用計算的背景，所以它可能更適合您。在這種情況下，根據這裏找到的規格http://www.w3.org/TR/NOTE-VML#：

VML形狀和組元素完全參與CSS2可視化渲染模型。

在這種情況下，就像在上面的例子中，應該有使用style標籤（如圖所示在上面的例子）將CSS屬性到一個形狀要素沒有問題。這應該照顧你的背景重複問題。

至於定心，該規範規定如下：

中心-X，中心-Y

這些性質可以被用於指定元件的內塊級框的中心其父容器框。

這應該照顧到你的水平居中問題。有關信息...

形狀和組元素包含其內容的塊 - 它們定義了一個CSS2「塊級別框」。

...所以某些佈局問題應該通過應用包含shape或group元素來解決。

來源

2012-12-24 08:47:47

非常感謝！我希望能夠將其設置爲「適當的」背景，但在經過一些更多的測試後，如您所建議的那樣，顯然這是不可能的。 – Andreas

很高興幫助:) –

我正在使用上述方法，而且我遇到了表格中的文本不可見的問題。我在[這個問題]中使用了這個方法（http://stackoverflow.com/questions/22613230/outlook-2013-background-image-broken），它使用了'rect'，它解決了我的問題。 – codechurn

展望VML，模仿CSS重複/定位

回答

相關問題