电子邮件时事通讯相互重叠

Question

我正在处理电子邮件简报。我希望将文本重叠在图像上，如下所示

我已尝试position: relative; left: -30px;和margin-left: 30px;，但展望2010，展望2013和许多其他电子邮件客户端正在展示

任何人都可以帮助我，所以我可以解决这个问题吗？

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;