如何防止来自其他表格的文本出现在图片html电子邮件代码中 [英] How do I prevent text from different table from appearing on a picture html email code

问题描述

因此，我在第一张桌子上放置了一张图片，将其绝对位置放置在上面，但我现在遇到的问题是，图片下面的桌子也出现了。如何防止这种情况发生？

So I place a picture in first table to position absolute to have text appear above it but the problem I'm having now is the table below text is also appearing on the image. How Do I prevent this from happening ?

<tr>
  <td>
    <table width="100%" cellspacing="0" cellpadding="0" border="0" style="">
      <tr>
        <td>
          <img src="img/suit1.jpeg" width="590px;" height="500px;" style="position:absolute">
          <h1>each</h1>
          <button>SHOP Now</button>
        </td>
      </tr>
    </table>
  </td>
</tr>
<!-- end of row 3 -->
<!-- start of row 4-->
<tr>
  <td>
    <table width="100%" cellspacing="0" cellpadding="0" border="0" style="">
      <tr>
        <td>
          <h1>hello</h1>
        </td>
      </tr>
    </table>
  </td>
</tr>

推荐答案

请尝试应用位置：绝对到文本元素。在我的解决方案中，我将文本包装在div中，并应用了 position：absolute 属性。另外，我将 position：relative 应用于图像和文本的父元素。

Please try applying position: absolute to text elements. In my solution, i've wrapped text inside a div and applied position: absolute property. Also, i've applied position: relative to the parent element of both image and text.

<tr>
  <td>
    <table width="100%" cellspacing="0" cellpadding="0" border="0" style="">
      <tr>
        <td style="position:relative;">
          <img src="img/suit1.jpeg" width="590px;" height="500px;">
          <div style="position:absolute; top: 0; left: 10px;">
            <h1>each</h1>
            <button>SHOP Now</button>
          </div>
        </td>
      </tr>
    </table>
  </td>
</tr>
<!-- end of row 3 -->
<!-- start of row 4-->
<tr>
  <td>
    <table width="100%" cellspacing="0" cellpadding="0" border="0" style="">
      <tr>
        <td>
          <h1>hello</h1>
        </td>
      </tr>
    </table>
  </td>
</tr>

这篇关于如何防止来自其他表格的文本出现在图片html电子邮件代码中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！