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

Question

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

例如，它可能是一个在主图像上呈现的小播放按钮，点击后会将您带到视频网址。

Answer 1

是的，虽然它需要很多代码，因为 Outlook 不支持 CSS background-image，所以VML 除了CSS之外，我们还必须使用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>