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

Question

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

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

Answer 1

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

将您的图像 url 放入，将其设置为 'single table sell' 并设置一些尺寸，然后您只需在 <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>

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

Add Overlay to Image in HTML EMail Compatible With Most Desktop and Web EMail Clients

html

email

html-email

email-client