HTML Table 图像重叠背景

Question

我正在尝试为我正在编码的 HTML 电子邮件创建一个 CTA 按钮，该按钮的图像与其重叠。

我有一个构建它的行动计划，但它似乎不适用于浏览器和电子邮件客户端。它在 Google Chrome 中看起来不错，但在许多其他浏览器和客户端（例如 Codepen）中开始出现问题

我将我的代码、我正在尝试创建的内容的屏幕截图以及供参考的线框放入此代码笔中。我哪里错了？

enter code here这是我的codepen。

提前致谢！

Answer 1

像这样它应该可以工作：

<table cellspacing="0" cellpadding="0">
  <tr>
    <td width="118" style="width: 118px;">
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="118" height="9" style="font-size: 9px; line-height: 9px; height: 9.5px;"></td>
        </tr>
        <tr>
          <td bgcolor="#0069aa" height="48" style="color: #ffffff;font-style: italic;font-weight: bold;text-align: center;font-size: 10px !important;background-color: #0069aa;line-height: 16px !important; font-size: 15.5px !important;">
            Download
            <br />FREE e-book</td>
        </tr>
      </table>
    </td>
    <td width="54" height="57" bgcolor="#0069aa" style="width: 54px; background-color:#0069aa; vertical-align:top;">
      <img width="54" src="http://www.camping-trafoi.com/pricelist/dog.gif" alt="" style="display:block;margin:0;padding:0;">
    </td>
    <td width="8" height="57.5" style="height: 57.5px;width: 8px;">
      <table cellspacing="0" cellpadding="0">
        <tr>
          <td height="9.5" style="height: 9.5px; font-size: 9.5px; line-height: 9.5px;"></td>
        </tr>
        <tr>
          <td height="48" bgcolor="#0069aa" style="height: 48px; background-color: #0069aa;font-size: 48px; line-height: 48px;">&nbsp;</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

HTML Table 图像重叠背景

HTML Table for image overlapping background

html

css

email

html-email