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

Question

Stack Overflow 用户。

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

我们拥有针对大型用户数据库的大规模个性化，因此我们需要覆盖文本图像的动态文本。

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

显而易见的计划是使用表格的背景图像。据说它在 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，否则可能会出现内容溢出但不会显示的情况。因此，请记住何时构建。通过此示例，您可以添加圆 Angular ，其弧度大小以百分比表示。

希望这是您想要的答案。