如何在電子郵件中使用圖像作爲表格背景？

堆棧溢出用戶。如何在電子郵件中使用圖像作爲表格背景？

我們運行一個通訊。我們需要顯示帶有文本的圖像作爲標題。

我們爲大型用戶數據庫提供了大量的個性化服務，因此我們需要一個覆蓋文本圖像的動態文本。

目前大多數客戶支持哪些選項？

明顯的計劃是使用表的background-image。據說它不適用於Outlook？

在客戶端支持方面存在一個無懈可擊的計劃：生成圖像服務器端和包含圖形文件。在沒有其他方法可行的情況下，實施它最簡單的方法是什麼？

你會走什麼路？謝謝！

來源

2017-06-13 SMailer

歡迎來到SO！這個問題有點偏離主題，對於Stack Overflow來說太廣泛了。有許多資源在線處理Outlook中的背景圖像。下面是關於SO主題的便捷指南：https：//stackoverflow.com/help/on-topic – disinfor

CSS背景圖像不在Outlook的支持，你將需要使用VML， https://backgrounds.cm/

Sometinhg這樣的：

<table> 
 
    <tr> 
 
     <td background="https://image.freepik.com/free-vector/abstract-background-with-a-3d-pattern_1319-68.jpg" width="150" height="150"> 
 
      <!--[if gte mso 9]> 
 
      <v:image xmlns:v="urn:schemas-microsoft-com:vml" 
 
       style='width:150px;height:150px;position:absolute;bottom:0;left:0;border:0;z-index:-3;' 
 
       src="https://image.freepik.com/free-vector/abstract-background-with-a-3d-pattern_1319-68.jpg" /> 
 
      <![endif]--> 
 
      <p>Put the rest of your content here</p> 
 
     </td> 
 
    </tr> 
 
</table>

下面是幾個例子：

Examlple 1

Example 2

來源

2017-06-13 17:30:15

電子郵件的哪個部分是此背景的？似乎它將整個電子郵件的背景？ OP在圖像人物之後。我編輯了你的答案以反映這一點。 – Syfer

Outlook中的背景僅適用於VML。要將圖像添加到表格單元格的personlisation我會建議使用下面的代碼：

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
 
    <tbody> 
 
    <tr> 
 
     <td background="[IMAGE GOES HERE]" style="background:url('[IMAGE GOES HERE]'); background-image: url('[IMAGE GOES HERE]');"> 
 
\t <!--[if gte mso 9]> 
 
\t <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:[ADD WIDTH OF IMAGE];height:[ADD IMAGE HEIGHT];"> 
 
\t \t <v:fill type="frame" src="[IMAGE GOES HERE]" color="[FALLBACK COLOR]" /> 
 
\t \t <v:textbox inset="0,0,0,0"> 
 
\t <![endif]--> 
 

 
\t \t [HTML CONTENT HERE] 
 

 
\t \t <!--[if gte mso 9]> 
 
\t \t </v:textbox> 
 
\t </v:rect> 
 
\t <![endif]--> 
 
\t 
 
\t 
 
\t </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

有跡象表明，需要改變之前，你的VML將正常工作的一些值：

要更改的圖像
備用顏色更改
要更改VML的高度和寬度

注：當使用VML您的內容必須符合VML內或在內容溢出，但不會顯示會有這樣的情況。所以請記住，這是建立。通過這個例子，你可以用百分比的arcsize添加圓角。

希望這是你以後的答案。

來源

2017-06-14 01:49:44 Syfer

如何在電子郵件中使用圖像作爲表格背景？

回答

相關問題