html - 如何让嵌套表与父表重叠

Question

首先:这是针对 HTML 电子邮件的，所以我想避免使用 div 和 margins。

我有一张图片，我想“从它的 table 上出来”并与另一张重叠。

这是我的 table 目前的样子:

这是我想要的样子:

如您所见，我希望图像的底部内容和 3/4 为白色背景，图像的上半部分和 1/4 为灰色背景。

这可能吗？

这是我目前所拥有的:

<table bgcolor="#fff" border="0" cellpadding="0" cellspacing="0" style="max-width:692px;background-color:#fff;" width="100%">
  <tbody>
    <tr>
      <td align="left" style="padding-right:0px 20px px 20px;" valign="top">
        <table align="center" border="0" cellpadding="0" cellspacing="0" style="max-width:100%;" width="100%">
          <tbody>
            <tr>
              <td align="left" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;padding-top:55px; text-align: center;">
                <table border="0" cellpadding="0" cellspacing="0" style="max-width:100%;" width="100%">
                  <tbody>
                    <tr>
                      <td colspan="2" align="left" style="font-size:20px;line-height:20px;color:#282929;font-family:Arial,sans-serif; text-transform:uppercase; text-align: center;">
                        RECOMMENDED CONTENT
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <tr>
              <!-- RED LINE -->
              <td align="center" colspan="2" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;padding-top:15px;padding-bottom:20px;">
                <table border="0" cellpadding="0" cellspacing="0">
                  <tbody>
                    <tr>
                      <td align="center" bgcolor="#f01616" height="4" style="height:4px;width:50px;font-size:0px; text-align: center;" width="50"></td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <tr>
              <!----------------->
              <!--NESTED TABLE -->
              <!----------------->
              <td align="left" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;">
                <table bgcolor="#ffffff" align="center" style="background-color:#fff;" border="0" cellpadding="0" cellspacing="0" width="80%">
                  <tbody>
                    <!-------------->
                    <!--  IMAGE -->
                    <!--------------->
                    <tr>
                      <td bgcolor="#FFF" align="center" style="background-color: #fff;">
                        <img alt="Get the app" src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/recommended-image.png" style="display:block;border:0px;font-family:Helvetica,Arial,sans-serif;color:#ffffff;font-size:20px;vertical-align:bottom; text-align: center; padding-bottom: 50px;">
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>

            </tr>
            <!--------------------->
            <!--NESTED TABLE END -->
            <!--------------------->
            <tr>
              <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;">
                <table bgcolor="#fff" style="background-color: #fff;" border="0" cellpadding="0" cellspacing="0" width="80%">
                  <tbody>
                    <tr>
                      <td bgcolor="#fff" align="center" style="font-size:14px;line-height:18px;color:#282929;font-family:Helvetica,Arial,sans-serif;font-weight:normal; text-align: center;">
                        Faceate volorunt uta quo moditas et labo. Comnima iorehent hit est am vit elit
                        <br> volores cimpossime serchit, oditiis rehenis volor sequisqui ut late cus,
                        <br> quamus aut optaque pressimendae ipsaereped et adi comnis dolles dellace
                        <br> proreptatur sam, cus aut et ut aceatur, quibuscipsam fuga.
                        <br> Lit qui sequae veliate volorem. Tem ut optatur?
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <tr>
              <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;padding-top:25px; padding-bottom: 40px;">
                <table border="0" cellpadding="0" cellspacing="0">
                  <tbody>
                    <tr>
                      <td align="center" bgcolor="#fff" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;border-radius:5px;background-color:#fff;width:178px;height:40px;">
                        <a href="#" style="font-family:Arial,sans-serif;color:#fff;text-decoration:none;display:inline-block;padding:10px 0;border-radius:5px;background-color:#f01616;font-size:12px;
font-weight:bold;text-align:center;line-height:20px;text-transform:uppercase;letter-spacing: 1px;width:178px;" target="_blank">
																	    DOWNLOAD NOW
												</a>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

如果这是用于电子邮件，那么为了避免以您想要的方式呈现图像的问题，我不得不说您需要让事情尽可能简单。

解决这个问题的最佳方法是简单地将额外的灰色包含到您的平板电脑图像中，而不是试图依赖重叠和透明的图像。

花费数年时间拼凑一些东西，冒着它在某些邮件客户端中看起来不对的风险，与花几分钟编辑一张图片之间的区别。