如何使嵌套表重叠父表

Question

首先：这是针对HTML电子邮件的，因此我希望避免使用div和margins。

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

以下是我目前的表格：

这就是我想要的样子：

正如你所看到的，我希望图像的底部内容和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

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

解决此问题的最佳方法是在平板电脑图像中添加额外的灰色，而不是尝试依赖重叠和透明的图像。

它的差异在于将某些东西一起黑客攻击，并冒着某些邮件客户端看起来错误的风险，并花费几分钟编辑图像。