css - 在 gmail 电子邮件消息中将图像显示在另一个图像之上

Question

我正在尝试为我的客户编写一封邮件，我想我可以在另一张图片的顶部插入一个 gif 倒计时时钟(只有数字)(我知道我可以做一个带有自定义背景的 gif，但是那么消息太重了)。除了 GMAIL，每个电子邮件客户端(Web 或桌面)都尊重显示: block 和边距。它一个接一个地显示图像。

有办法解决吗？请帮忙

Answer 1

表格代码看起来像这样:

    <table align="center" width="652" bgcolor="#f5f5f5" cellpadding="0" cellspacing="0" border="0" style="background:#f5f5f5; border:none; margin-top: -95px;">
<tr width="650" height="95" cellpadding="0" cellspacing="0" border="0" style="">
    <td width="134" height="95" cellpadding="0" cellspacing="0" border="0" style="border-left: 1px solid #afafaf;"colspan="3">
        <a href="link" border="0" style="border:none;">
            <img src="3.jpg" border="0" width="134" height="95" style="width:134px; height:95px; border:none; display:block;" alt="alt">
        </a>
    </td>
    <td width="381" height="95" cellpadding="0" cellspacing="0" border="0" style=""colspan="3" bgcolor="#000">
        <a href="link" border="0" style="border:none;">
            <img src="4.jpg" border="0" width="381" height="95" style="width:381px; height:95px; border:none; display:block;" alt="">
        </a>
    </td>
    <td width="135" height="95" cellpadding="0" cellspacing="0" border="0" style="border-right: 1px solid #afafaf;"colspan="3">
        <a href="link" border="0" style="border:none;">
            <img src="5.jpg" border="0" width="135" height="95" style="width:135px; height:95px; border:none; display:block;" alt="alt">
        </a>
    </td>
</tr>
</table>

Gmail 将一张图片显示在另一张图片下方，并且不遵守负边距。

现在看起来像这样:

It looks like this right now