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

时间:2017-06-13 15:05:42

标签: css html5 email background-image html-email

Stack Overflow用户。

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

我们为大型用户数据库进行了大规模的个性化设置,因此我们需要一个覆盖文本图像的动态文本。

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

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

有一个后备计划在客户支持方面是无懈可击的:生成图像服务器端和包含为图形文件。实现它的最简单方法是什么,以防其它方法无效?

你会怎样走?谢谢!

2 个答案:

答案 0 :(得分: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>
&#13;
&#13;
&#13;

以下是几个例子:

Examlple 1

Example 2

答案 1 :(得分:0)

Outlook中的背景仅适用于VML。要将图像添加到表格单元格以供人员使用,我建议使用以下代码:

&#13;
&#13;
strings
&#13;
&#13;
&#13;

在VML正常工作之前,有些值需要更改:

  • 要更改的图片
  • 要改变的后备颜色
  • 要更改的VML高度和宽度

注意: 使用VML时,您的内容必须符合VML,否则会出现内容溢出但不会显示的情况。所以在构建它时请记住。在此示例中,您可以使用arcsize以百分比形式添加圆角。

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