Question

我想在表格中添加背景图片......

<table background="https://host.tld/image.png">
<tr><td>blablabal</td></tr>
</table>

不起作用......任何想法？

Answer 1

要覆盖几乎所有客户端，包括Windows Outlook，需要在HTML / CSS中定义一次背景图片，并在VML中为Outlook版本再次使用Microsoft Word呈现电子邮件。

这是我用于此的Backgrounds.cm的修改版本：

<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%">
    <tr>
        <td background="http://placehold.it/680x180/222222/666666" bgcolor="#222222" valign="middle" style="text-align: center; background-position: center center !important; background-size: cover !important;">
            <!--[if gte mso 9]>
            <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0; display: inline-block; width: 680px; height: 180px;" src="http://placehold.it/680x180/222222/666666" />
            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0; display: inline-block; position: absolute; width: 680px; height: 180px;">
            <v:fill opacity="0%" color="#222222" />
            <![endif]-->
            <div>
                <!--[if mso]>
                <table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="500">
                <tr>
                <td align="center" valign="top" width="500">
                <![endif]-->
                <table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:500px; margin: auto;">
                    <tr>
                        <td valign="middle" style="text-align: center; padding: 40px 20px; font-family: sans-serif; font-size: 15px; line-height: 140%; color: #ffffff;">
                            blah blah blah
                        </td>
                    </tr>
                </table>
                <!--[if mso]>
                </td>
                </tr>
                </table>
                <![endif]-->
            </div>
            <!--[if gte mso 9]>
            </v:fill>
            </v:rect>
            </v:image>
            <![endif]-->
        </td>
    </tr>
</table>

Answer 2

你可以使用这个在线服务https://backgrounds.cm/，它做得很好，以及Outlook 2007,2010,2013

如何将背景图像添加到HTML电子邮件？

2 个答案: