Flexbox文本无法移出背景图区域 网页布局问题求助

问题原因 #

你当前的写法中，#hero 容器的高度由内部内容（标题、.three元素）加上自身 padding-bottom:100px 共同撑起。当给 .three 添加 padding-top 时，会进一步增大 #hero 的整体高度，而 background-size:cover 会自动铺满整个容器，导致背景图随容器“放大”，无法实现将文本移至背景图下方的效果。

解决方案1：Flex垂直布局+固定容器高度 #

给 #hero 设置固定高度，同时用Flex垂直布局让标题靠上、底部文本靠下，背景图会铺满固定高度的容器，不会随内容内边距变化而改变。

修改后的完整代码：

.title {
  text-align: center;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
  color: white;
}

#hero {
  background-image: url("river.webp");
  background-size: cover;
  background-position: center; /* 确保背景图居中，避免拉伸变形 */
  height: 600px; /* 可根据需求调整高度 */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 标题顶部对齐，底部文本底部对齐 */
  padding: 10px 0;
}

body {
  margin: 0;
}

.three {
  color: white;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: space-around;
  padding: 20px 0; /* 避免底部文本贴边 */
}

<div id="hero">
  <h1 class="title">This is Cypress!</h1>
  <div class="three">
    <h4>Lively malls</h4>
    <h4>Challenging Escape Rooms</h4>
    <h4>Relaxing on the lake</h4>
  </div>
</div>

解决方案2：绝对定位固定底部文本位置 #

如果不想给容器设置固定高度，可给 #hero 设置相对定位，将 .three 绝对定位到容器底部，这样底部文本的位置不会影响容器高度，背景图仅根据容器最小高度和内部标题适配。

修改后的完整代码：

.title {
  text-align: center;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
  color: white;
}

#hero {
  background-image: url("river.webp");
  background-size: cover;
  background-position: center;
  position: relative;
  min-height: 500px; /* 设置最小高度，保证背景图显示足够区域 */
  padding: 10px 0;
}

body {
  margin: 0;
}

.three {
  color: white;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: space-around;
  position: absolute;
  bottom: 20px; /* 调整此值控制文本距底部的距离 */
  left: 0;
  right: 0;
}

<div id="hero">
  <h1 class="title">This is Cypress!</h1>
  <div class="three">
    <h4>Lively malls</h4>
    <h4>Challenging Escape Rooms</h4>
    <h4>Relaxing on the lake</h4>
  </div>
</div>

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