如何实现带叠加文字div的响应式全屏hero背景图且不使用absolute定位

可以通过CSS Grid布局实现需求，不需要使用position: absolute，同时完全保留你当前背景图的响应式缩放逻辑。

实现原理 #

给承载背景图的.bg-img容器设置Grid布局，Grid允许将多个元素放置在同一个网格单元格内，容器内的文字元素会自然堆叠在背景层上方，不需要额外定位。

修改后的代码 #

CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.bg-img {
  background-image: url('https://www.bbva.com/wp-content/uploads/2016/12/Carl-Sagan-BBVA-1920x0-c-f.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  padding-top: 40.57%;
  /* (img-height / img-width * width) */
  /* (779 / 1920 * 100) */
  /* 新增Grid布局配置 */
  display: grid;
  /* 文字居中配置，可根据需求调整 */
  place-content: center;
}

/* 文字容器自定义样式示例 */
.hero-text {
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  text-align: center;
}

HTML结构示例 #

<div class="bg-img">
  <div class="hero-text">
    <h1>卡尔·萨根</h1>
    <p>我们都是星尘的产物</p>
  </div>
</div>

补充说明 #

• 你可以通过调整Grid的place-content、place-items属性，或者给文字容器添加内边距来灵活调整文字位置，全程不需要使用定位属性
• 原有背景图的响应式缩放逻辑完全保留，表现和你之前的实现一致
• 容器内的多层元素堆叠顺序遵循DOM先后顺序，越靠后的元素默认层级越高，无需额外设置z-index

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