html - 重叠 td 与不同的背景

Question

您好，我正在努力创建新闻稿模板。此刻我被卡住了，因为我试图重叠两个 td，并给上面的一个不同的背景覆盖。

我附上了 Code Pen ，但下面是代码!所以你的图像在后面，前面有一个绿色的标题。我需要在该标题上有一个透明的(ish)背景。然而，我添加的任何背景似乎都放在该图像后面。有什么想法吗？

这是我想要实现的目标的图像:

    .second-row-header {
        margin-top: -62px;
    }

    .third-row {
        border-bottom: 59px solid #f9e7ed;
    }

    .third-row-text {
        width: 420px;
        font-size: 22px;
        margin-top: 30px;
        line-height: 1.36;
    }

    h1 {
        font-size: 65px;
        font-family: Arial Narrow, Franklin Gothic Medium, Arial, sans-serif;
        font-stretch: condensed;
        font-weight: bold;
        color: #95c11f;
        margin-bottom: 33px;
        margin-top: 0;
        line-height: 65px;
        background-color: red;
    }

    .more {
        background-color: #257236;
        border-top: 13px solid #257236;
        border-bottom: 13px solid #257236;
        text-align: center;
        color: #fff;
        text-decoration: none;
        font-family: Arial Narrow, Franklin Gothic Medium, Arial, sans-serif;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 55px;
        margin-bottom: 60px;
        max-width: 337px;
        line-height: 1.5;
        font-size: 20px;
    }

    .more a {
        color: #fff;
        text-decoration: none;
    }

    .h2 {
        font-size: 40px;
        font-family: Arial Narrow, Franklin Gothic Medium, Arial, sans-serif;
        font-weight: bold;
        color: #884a5f;
        margin: 10px 0;
        display: block;
        line-height: 1.5;
        text-align: center;
    }

    .h1 {
        font-size: 40px;
        font-family: Arial Narrow, Franklin Gothic Medium, Arial, sans-serif;
        font-stretch: condensed;
        font-weight: bold;
        color: #95c11f;
        margin-top: 0;
        line-height: 45px;
        text-align:center;
    }

<table class="bodytable" align="center">
  <!-- REPEAT START -->
  <tr mc:repeatable>
    <td>
      <table class="elementtable" align="center" bgcolor="#f9e7ed" width="690px">
        <!-- FIRST ROW START -->
        <tr class="first-row" mc:hideable>
          <td>
            <table class="imagetable">
              <tr>
                <td>
                  <img src="https://gallery.mailchimp.com/af180f027aa47c874c895a8b5/images/a8d65979-bcb7-4f21-87a9-fec223f046c9.png" style="max-width:690px;" alt="a8d65979-bcb7-4f21-87a9-fec223f046c9.png" mc:edit="image">
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <!-- FIRST ROW END -->
        <!-- SECOND ROW START -->
        <tr class="second-row">
          <td>
            <table class="second-row-header" width="503px" height="62px" align="center">
              <tr>
                <td>
                  <div>
                    <p class="h1">Bienenfutter zum</p>
                  </div>
                </td>
              </tr>
            </table>
          </td>
        </tr>

      </table>
    </td>
  </tr>
  <!-- REPEAT END -->
</table>

请注意，这是一个通讯模板，想想 1998 年的网络，大多数花哨的网络内容在这里都没有用!

Answer 1

如果你想保持你的 HTML 结构，你应该使用 z-index，它的作用是，它根据值向上或向下移动元素。您应该尝试以下方法:

.h1{
    background: red;
    position: relative;
    z-index: 1;        
}

你不必定义 z-index，但它有利于可读性，如果你想给另一个元素一个不同的索引，它会很有用。另外，请记住 z-index，只有在元素设置了 position 时才会采取行动。你也可以看看this获取有关 z-index 的更好上下文和信息。