如何实现带重叠文本框的Hero Image？Grid布局问题求助

预期效果 #

顶部展示一张Hero图片，白色文本框的顶部部分重叠在Hero图片的底部，Hero图片保留大部分可见区域，文本框仅遮挡图片底部小部分区域。

关键问题修正 #

当前方案依赖网格行高控制Hero图高度，且网格行重叠导致文本框遮挡过多图片。通过以下调整解决问题：

• 给Hero背景图设置min-height，独立控制其高度，无需依赖网格行高
• 用负margin替代网格行覆盖，精准控制文本框与Hero图的重叠范围
• 通过z-index明确层级，确保标题、文本框、Hero图按预期顺序显示

修改后的代码 #

CSS 代码

.shell {
  display: grid;
  grid-template-columns: 0 1fr 0;
  grid-template-rows: auto auto 1fr auto;
  gap: 0;
}

@media (min-width: 600px) {
  .shell {
    grid-template-columns: 20px 1fr 20px;
  }
}

.shell:before {
  content: "";
  grid-column: 1/-1;
  grid-row: 1/2;
  background-image: url(https://i.ibb.co/x866XdV/test-hero.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 300px; /* 可根据需求调整高度 */
}

.shell-header {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  color: #FFF;
  padding: 35px 20px;
  z-index: 1;
}

.shell-body {
  grid-row: 2 / 3;
  grid-column: 2 / 3; 
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
  background-color: #FFF;
  max-width: 80rem;
  margin-top: -60px; /* 调整此值控制重叠程度 */
  z-index: 2;
}

body {
  margin:0;
  font-family: sans-serif;
}

HTML 代码

<div class="shell">
  <div class="shell-header">
    <h2>Hero区域标题</h2>
  </div>
  <div class="shell-body">
    <h1>Title</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat vel ducimus illo consectetur commodi ex nulla aut amet ipsum maiores itaque, iusto quam mollitia facilis consequatur tempora neque quod eligendi?</p>
  </div>
</div>

效果说明 #

• Hero图通过min-height保证基础展示高度，background-position: center确保图片核心区域不被裁切
• 文本框通过负margin实现与Hero图的部分重叠，灵活调整数值可控制遮挡范围
• z-index设置确保标题在Hero图上方，文本框在最上层，层级关系清晰

内容的提问来源于stack exchange，提问作者user10516592