电子邮件通讯 <td> 相互重叠

Question

我正在编写电子邮件通讯。我想在图像上重叠文本，如下所示使用

我尝试过 position: relative; left: -30px; 和 margin-left: 30px;，但 Outlook 2010、Outlook 2013 和许多其他电子邮件客户端都显示以下内容

谁能帮我解决这个问题？

<table border="0" width="100%" cellpadding="0" cellspacing="0" align="center" style="margin-top: 20px; margin-bottom: 20px;">
  <tr>
    <td class="hh-force-col-center description-padding">
      <p>
        <img class="fluid" src="http://w3debugger.com/map_newsletter/occasionwear.jpg" alt="Product Image here (allow images to see product image)" style="display: block;5dadb; text-align: left; font-family: 'Ropa Sans', sans-serif; font-size: 16px; color: #733242;"
        height="199" width="199" border="0">
      </p>
    </td>

    <td class="hh-force-col-center">
      <p class="overlap-text" style="margin: 0; margin-bottom: 22px; margin-left: -32px; color: #6f6472; font-family: 'Ropa Sans', sans-serif; font-size: 14px; line-height: 25px; text-transform: uppercase;">
        Our Occasionwear is all about luxury outfits for those exceptional moments. Stunning pieces from the latest collection suitable from 0-3 years.
      </p>

      <a class="overlap-text" target="_blank" href="http://www.google.com" style="color: #475054; margin-left: -32px; font-family: 'Roboto Condensed', sans-serif; font-size: 700; font-size: 12px; line-height: 15px; text-align: center; text-decoration: none; display: inline-block; padding: 9px 20px; border: 2px solid #475054;">
        <img src="http://w3debugger.com/map_newsletter/icon-arrow-left.png" alt="Left arrow" style="margin-right: 8px;" height="10" width="6" border="0">

        <b>
                              <!--[if mso]>&nbsp;<![endif]-->GET THE LOOK<!--[if mso]>&nbsp;<![endif]-->
                            </b>
      </a>
    </td>
  </tr>
</table>

Answer 1

您可以将图像设置为背景：

<table border="0" width="100%" cellpadding="0" cellspacing="0" align="center" style="margin-top: 20px; margin-bottom: 20px;">
  <tr>
    <td class="hh-force-col-center description-padding" style=" text-align: left; font-family: 'Ropa Sans', sans-serif; font-size: 16px; color: #733242; background-image: url('http://w3debugger.com/map_newsletter/occasionwear.jpg'); background-repeat: no-repeat;"
        height="199" border="0">
      <p class="overlap-text" style="margin: 0 0 0 160px; color: #6f6472; font-family: 'Ropa Sans', sans-serif; font-size: 14px; line-height: 25px; text-transform: uppercase;">
        Our Occasionwear is all about luxury outfits for those exceptional moments. Stunning pieces from the latest collection suitable from 0-3 years.
      </p>

      <a class="overlap-text" target="_blank" href="http://www.google.com" style="color: #475054; margin: 50px 0 0 160px; font-family: 'Roboto Condensed', sans-serif; font-size: 700; font-size: 12px; line-height: 15px; text-align: center; text-decoration: none; display: inline-block; padding: 9px 20px; border: 2px solid #475054;">
        <img src="http://w3debugger.com/map_newsletter/icon-arrow-left.png" alt="Left arrow" style="left: 160px; margin: 0 8px 0 0;" height="10px" width="6px" border="0">

        <b>
                              <!--[if mso]>&nbsp;<![endif]-->GET THE LOOK<!--[if mso]>&nbsp;<![endif]-->
                            </b>
      </a>
    </td>
  </tr>
</table>