如何将特色图像与帖子标题和摘录叠加

Question

我不知道在这里问这个问题是否合适，我是一个 HTML 和 CSS 新手。我正在与 Wordpress.org 合作。问题是，我正在创建一个带有帖子网格的页面。我希望这些帖子的标题和摘录能够覆盖特色图像。像这样的东西，尽管本例中缺少摘录：

我想为此使用自定义 CSS，但我不知道如何操作。到目前为止，我一直在使用子主题来更改字体和颜色，仅此而已。出版物网格将有两列，其中所有图像的尺寸都相同。我正在使用“查询循环”块。我真的很感激你能给我的任何帮助！预先感谢！

我无法想出正确的 CSS 代码来实现我想要的效果。

Answer 1

关键是在表示单个帖子的元素上使用

position: relative

，并在文本上使用

position: absolute

将其脱离正常流程（叠加），并将其放置在帖子元素的底部.

body {
  margin: 1em;
  font-family: sans-serif;
}

.my-post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1em;

  > div {
    position: relative;
    box-shadow: 0 0 10px rgb(0 0 0 / 0.2);

    > img {
      display: block;
      max-width: 100%;
    }

    > div {
      position: absolute;
      bottom: 0;
      padding: 0 1em;
      color: white;
      background: linear-gradient(180deg, rgb(0 0 0 / 0) 0%, rgba(0 0 0 / 0.8) 100%);
      text-shadow: 0 0 10px black;

      > h3 {
        text-transform: uppercase;
      }
    }
  }
}

<div class="my-post-grid">
  <div>
    <img src="https://picsum.photos/id/98/400/225">
    <div>
      <h3>Title One</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie enim at ipsum maximus ultrices.</p>
     </div>
  </div>
  <div>
    <img src="https://picsum.photos/id/197/400/225">
    <div>
      <h3>Title Two</h3>
      <p>Suspendisse vel lectus fringilla, convallis ex ut, porttitor tortor. Mauris ut sem vitae quam consectetur mattis nec non ante.</p>
    </div>
  </div>
 </div>