如何在电子邮件中使用图像作为表格背景

Question

Stack Overflow users.

我们运行时事通讯。我们需要显示一个带有文本的图像作为标题。

我们为大型用户数据库提供了大量的个性化设置，因此我们需要一个覆盖文本图像的动态文本。

大多数客户端目前支持哪些选项？

显而易见的计划是使用表格的背景图像。据说它在 Outlook 中不起作用？

有一个在客户端支持方面无懈可击的后备计划：生成图像服务器端并包含为图形文件。万一没有其他工作，实现它的最简单方法是什么？

你会走哪条路？谢谢！

Answer 1

Outlook 中的后台仅适用于 VML。要将图像添加到表格单元格以进行个性化设置，我建议使用以下代码：

 <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]');">
	  <!--[if gte mso 9]>
	  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:[ADD WIDTH OF IMAGE];height:[ADD IMAGE HEIGHT];">
		<v:fill type="frame" src="[IMAGE GOES HERE]" color="[FALLBACK COLOR]" />
		<v:textbox inset="0,0,0,0">
	  <![endif]--> 
		[HTML CONTENT HERE]
		<!--[if gte mso 9]>
		</v:textbox>
	  </v:rect>
	  <![endif]-->
	  
	  
	  </td>
    </tr>
  </tbody>
</table>

在 VML 正常工作之前，需要更改一些值：

• 要更改的图像
• 要更改的回退颜色
• 要更改的 VML 高度和宽度

注意：使用 VML 时，您的内容必须适合 VML，否则会出现内容溢出但不会显示的情况。因此，请记住构建时。在本例中，您可以添加弧度大小的圆角(以百分比表示(。

希望这就是你所追求的答案。

Answer 2

OUTLOOK不支持CSS背景图像，您需要使用VML，https://backgrounds.cm/

像这样：

<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>

这里有几个例子：

考试 1

例 2