如何创建一个多电子邮件客户端 html 模板，以便在所有客户端中显示顶部带有文本的背景图像？

Question

我正在尝试为电子邮件html模板的table元素tr添加背景图片.还有一个 文本显示在图像的顶部 。

The text is dynamic coming from a from field so I can not make it as image in table elements.

我的代码如下

        <tr>
            <td background="http://bit.ly/1HXqys9" bgcolor="#c0393f" style="background-image: url('http://bit.ly/1HXqys9');width:600px;height:240px"  width="600" height="240" valign="top" >
                <!--[if gte mso 9]>
                 <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:240px;">
                   <v:fill type="tile" src="hhttp://bit.ly/1HXqys9" color="#c0393f" />
                   <v:textbox inset="0,0,0,0">
                 <![endif]-->
                 <p style="color:#c9be8a;font-weight:700;font-size:19px;width:220px; text-transform:uppercase ;margin:147px 0px 0px 107px; ">
                     Hello. This is my text.
                 </p>
            </td>
        </tr>

问题是背景图片在以下电子邮件客户端中不显示

Outlook 2007、Outlook 2010、Outlook 2011、Outlook 2013、Gmail Firefox、Gmail chrome、Outlook.com 资源管理器、Outlook.com Chrome、Yahoo Mail Explorer、Yahoo邮件 Chrome

Answer 1

能否将代码放在 table 中并尝试。我认为它会起作用

<table border="0" cellpadding="0" cellspacing="0" align="center"> 
     <tr>
            <td background="http://bit.ly/1HXqys9" bgcolor="#c0393f" style="background-image: url('http://bit.ly/1HXqys9');width:600px;height:240px"  width="600" height="240" valign="top" >
                <!--[if gte mso 9]>
                 <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:240px;">
                   <v:fill type="tile" src="hhttp://bit.ly/1HXqys9" color="#c0393f" />
                   <v:textbox inset="0,0,0,0">
                 <![endif]-->
                 <p style="color:#c9be8a;font-weight:700;font-size:19px;width:220px; text-transform:uppercase ;margin:147px 0px 0px 107px; ">
                     Hello. This is my text.
                 </p>
            </td>
        </tr>
</table>

如何创建一个多电子邮件客户端 html 模板，以便在所有客户端中显示顶部带有文本的背景图像？

How to create a multi email client html template such that background image with text on top is displayed in all clients?

html

css

email

outlook

gmail