如何实现Banner图与文本重叠（文本前置）并消除多余空白？

一、基础HTML结构 #

用容器包裹Banner图片与文本元素，为定位布局提供基础：

<div class="banner-container">
  <img src="你的Banner图片地址" alt="Banner描述" class="banner-image">
  <div class="banner-text">
    <h1>核心标题</h1>
    <p>辅助描述文本</p>
  </div>
</div>

二、CSS核心实现（解决两大需求） #

1. 限制图片空间，避免挤压文本 #

通过容器固定高度+图片绝对定位，彻底杜绝图片无限制扩张挤压文本：

.banner-container {
  position: relative;
  /* 按需设置高度，比如占视口60%，或固定像素值 */
  height: 60vh;
  overflow: hidden; /* 裁剪超出容器的图片部分 */
  margin: 0; /* 消除默认边距产生的空白 */
  padding: 0;
}

.banner-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，铺满容器不拉伸 */
  z-index: 1; /* 图片置于下层 */
}

2. 实现文本图片重叠+消除多余空白 #

通过绝对定位让文本覆盖在图片上，同时重置文本默认边距消除空白：

.banner-text {
  position: absolute;
  /* 按需调整位置，示例为左下方对齐 */
  bottom: 2rem;
  left: 2rem;
  z-index: 2; /* 文本置于上层 */
  color: #ffffff; /* 根据图片底色调整，保证可读性 */
  margin: 0;
  padding: 0;
}

.banner-text h1, .banner-text p {
  margin: 0 0 0.5rem 0; /* 仅保留文本间的间距，消除默认上下边距 */
}

三、响应式适配（可选） #

针对移动端调整布局，优化显示效果：

@media (max-width: 768px) {
  .banner-container {
    height: 40vh;
  }
  .banner-text {
    bottom: 1rem;
    left: 1rem;
  }
  .banner-text h1 {
    font-size: 1.5rem;
  }
}

内容的提问来源于stack exchange，提问作者alessi.gg