Question

忽略那些非常丑陋的照片（它们不是我将用于该项目的实际照片，只是占位符），但是我正在尝试制作一个HTML电子邮件模板。我使用flexbox制作了一个完美的模板（请参见下图），但是刚刚发现Gmail不支持该模板，因此我不得不恢复为使用HTML table。

我的问题是，我的背景图像与上面的内容重叠（使用flex），但是如何使用HTML table来实现相同的输出？简而言之，我可以进入Photoshop并将这两个图像组合在一起，但是客户端不希望我在可以帮助的情况下操纵这些图像，因此，通过代码执行此操作是目前的最佳解决方案。

table {
  width: 350px !important;
  max-width: 450px !important;
  margin: 0 auto;
  border: 1px solid black;
}

thead,
td {
  text-align: center;
}

#background {
  background-image: url("https://i.ibb.co/qsfyckt/Untitled-1.png");
  background-size: cover;
  background-position: 100% 0%;
  width: 100%;
  height: 310px;
  position: relative;
  z-index: 10000;
  top: -7%;
}

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>

  <table cellpadding="0" cellspacing="0">
    <thead>
      <tr>
        <th colspan="2"><img src="https://images.pexels.com/photos/1043506/pexels-photo-1043506.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" style="width: 350px">
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td colspan="2"><img src="https://images.pexels.com/photos/302899/pexels-photo-302899.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" style="width: 350px"></td>
      </tr>
      <tr>
        <td id="background" colspan="2"><img src="https://i.ibb.co/qsfyckt/Untitled-1.png" style="width: 350px"></td>
      </tr>
    </tbody>
  </table>


</body>

</html>

Answer 1

向img

添加样式

position: relative;
top: -32px;

将HTML表格行的背景图片重叠到上方

1 个答案: