CSS按鈕不在Outlook中的HTML電子郵件模板中的背景圖像

我正在圖像頂部創建一個具有背景圖像和文本/ CTA按鈕的電子郵件模板。我正在使用bulletproof backgrounds作爲CTA按鈕的背景圖像和beefree.io編輯器輸出的按鈕。除了Outlook 2010之外，所有客戶端都可以很好地進行渲染。當按鈕只是一個圖像時，我可以使CSS按鈕完美呈現，當背景只是一種顏色時，反之亦然。當我把兩者結合起來就呈現如下：CSS按鈕不在Outlook中的HTML電子郵件模板中的背景圖像

，這是它應該如何渲染：

的CSS按鈕被顯示出來，只是在錯誤的位置。有沒有人有我的代碼中哪裏出錯的建議？

https://codeshare.io/zr0Bj（背景圖像代碼開始圍繞行192）

感謝康納

來源

2016-02-02 cmccarra

不幸的是你不能使用的防彈背景圖像上的防彈按鈕。而不是這個，我會使用這個按鈕的td和一個標籤按鈕版本。（酸性電子郵件上有一篇很好的文章 - https://www.emailonacid.com/blog/article/email-development/simple-code-based-bulletproof-button）Outlook用來模仿什麼其他電子郵件客戶端做正常

這兩個「刀槍不入」技術沒有發揮不錯的原因是VML（矢量標記語言）。 Outlook接受的VML是有限的（就像Outlook的所有內容一樣），並且不允許堆疊，因此當您嘗試執行此操作時會中斷。試圖將兩個「防彈」背景圖像放在另一個上面也是一樣。它不會結束。

來源

2016-02-02 13:15:42 Gortonington

嗨戈爾頓頓，感謝您的快速回答。我認爲這與VML標籤沒有正確放置以允許兩個元素有關，但至少現在我知道你不能使用這兩個元素。我從Acid on Acid實現了你的建議，並在Outlook中獲得以下內容：https：//cdn.pbrd.co/images/1fQ6AGyJ.png ...是否有可能讓它出現在文章中？ – cmccarra

在TD上添加填充以充實按鈕。在展望方面，雖然這不會是可點擊的。您也可以在標籤內使用在文本的左側和右側創建可點擊的空間。 – Gortonington

您有問題的原因很可能是由於使用的「防彈」選項包含VML對象：

<v:textbox>

在VML一個TextBox應僅包含非VML元素，即你可以;在文本區域中放置另一個形狀以用於形狀。

<v:rect> 
    <v:textbox> 
    <v:roundrect> 
    </v:roundrect> 
    </v:textbox> 
</v:rect>

這是一個非常粗略的表示，你目前有什麼，使用上面的邏輯被認爲是無效的。

你可以做的是在你的內容和按鈕的HTML區域後面放置一個VML圖像來保存你的背景圖像。

<table width="640" cellpadding="0" cellspacing="0" border="0"> 
    <tr> 
    <td style="position:relative;"> 
     <!--[if gte mso 9]> 
     <v:image src="...yourbackgroundimage.jpg" style="position:absolute;top:0;left:0;z-index:-1;" 
     <![endif]--> 
     <table cellpadding="0" cellspacing="0" border="0"> 
     <tr> 
      <td> 
      your content here, including your VML button 
      </td> 
     </tr> 
     </table 
    </td> 
    </tr> 
</table>

有一些嚴重的僵化這種方法，但是它是非常分層VML的唯一出路對象，而不進入大驚小怪使用

<v:group>

要知道使用負時的在VML元素上使用z-index，並在電子郵件正文上使用背景顏色，圖像將位於背景顏色的後面：|

希望這會有所幫助。

編輯：

只是對於所提到的，疊加的背景圖像上的另一點參考。如果因爲什麼原因你想要堆疊多個.png，或者說例如在你想要覆蓋文本的背景圖像上放置一個roundel。您可以添加多個圖像ot頂部堆棧：

<table width="640" cellpadding="0" cellspacing="0" border="0"> 
    <tr> 
    <td style="position:relative;"> 
     <!--[if gte mso 9]> 
     <v:image src="...yourbackgroundimage.jpg" style="position:absolute;top:0;left:0;z-index:-1;" /> 
     <v:image src="...yourroundel.jpg" style="position:absolute;top:0;left:0;z-index:-2;" /> 
     <![endif]--> 
     <table cellpadding="0" cellspacing="0" border="0"> 
     <tr> 
      <td> 
      your content here, including your VML button 
      </td> 
     </tr> 
     </table 
    </td> 
    </tr> 
</table>

來源

2016-02-16 01:27:49

CSS按鈕不在Outlook中的HTML電子郵件模板中的背景圖像

回答

相關問題