为 HTML 电子邮件中的图像添加覆盖，与大多数桌面和 Web 电子邮件客户端兼容

Question

2017 年有没有办法在 HTML 电子邮件中的主图像上显示 基于图像或基于文本的叠加层，以便它被当前的大多数人正确呈现桌面和网络电子邮件客户端：Outlook 2007+、Thunderbird、移动客户端、GMail、Outlook.com、Yahoo Mail 等？

例如，它可能是一个在主图像上呈现的小播放按钮，单击该按钮会带您进入视频网址。

Answer 1

使用 VML 仍然是在 Outlook 环境中获得背景图像支持的唯一方法。 所以你会想要使用这个工具 https://backgrounds.cm/

将您的图片网址放入，将其设置为“单桌销售”并设置一些尺寸，然后您只需在 <div> 标签之间构建叠加内容

Answer 2

是的，虽然它需要大量代码，因为 Outlook 不支持 CSS background-image，所以我们必须使用 VML 除了 CSS 来获得到处显示的背景图像。 backgrounds.cm 是一个很好的起点，但已经有一段时间没有更新了。像这样的东西是一个很好的起点：

<tr>
    <!-- Bulletproof Background Images c/o https://backgrounds.cm -->
    <td background="http://placehold.it/600x180/222222/666666" bgcolor="#222222" valign="middle" style="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: 600px; height: 180px;" src="http://placehold.it/600x180/222222/666666" />
        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0; display: inline-block; position: absolute; width: 600px; height: 180px;">
        <v:fill opacity="0%" color="#222222" />
        <![endif]-->
        <div>
            <!--[if mso]>
            <table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="600">
            <tr>
            <td align="center" valign="top" width="600">
            <![endif]-->
            <table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
                <tr>
                    <td valign="middle" style="padding: 20px; color: #ffffff;">
                        <img src="http://placehold.it/100" height="100" width="200" alt="">
                        <p style="margin: 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut&nbsp;erat.</p>
                    </td>
                </tr>
            </table>
            <!--[if mso]>
            </td>
            </tr>
            </table>
            <![endif]-->
        </div>
        <!--[if gte mso 9]>
        </v:fill>
        </v:rect>
        </v:image>
        <![endif]-->
    </td>
</tr>