电子邮件通讯​​彼此重叠

Question

我正在处理电子邮件通讯。我要重叠在图像文本就像使用

我试图position: relative; left: -30px;和margin-left: 30px;但展望2010年，展望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>