如何正确叠加视频与冰山图片并实现响应式缩放？

需求清单 #

• 背景视频铺满全屏
• 在视频上方底部位置叠加冰山图片
• 文本居中显示在视频和冰山图片上方
• 实现响应式效果，保证冰山图片和文本在不同屏幕尺寸下正确缩放

实现代码 #

HTML 代码 #

<div class="hero-section"> 
  <!-- 背景视频 -->
  <video class="hero-video" autoplay loop muted playsinline>
    <source src="背景视频地址" type="video/mp4">
    您的浏览器不支持视频播放。
  </video>

  <!-- 冰山图片 -->
  <img src="冰山图片地址" class="iceberg" alt="冰山">

  <!-- 叠加内容 -->
  <div class="hero-content">
    <h1>这些挑战不必定义您的忠诚度计划。</h1>
    <p>让我们借助GRAVTY®，将水下的潜力转化为巅峰成就。</p>
    <a href="#" class="btn">联系我们</a>
  </div>
</div>

CSS 代码 #

.hero-section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.iceberg {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  max-width: 600px;
  height: auto;
  z-index: 2;
}

.hero-content {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  z-index: 3;
  width: 80%;
}

关键实现说明 #

• 视频全屏覆盖：通过position: absolute和object-fit: cover让视频铺满整个Hero区域，同时保持画面比例不变
• 层级控制：通过z-index设置显示层级，视频（1）< 冰山图片（2）< 文本内容（3），确保元素叠加顺序正确
• 冰山定位：使用bottom: 0固定在底部，left: 50%+transform: translateX(-50%)实现水平居中，百分比宽度搭配max-width保证响应式缩放
• 文本居中：通过top: 35%+transform: translate(-50%, -50%)实现垂直+水平居中，width: 80%避免文本在小屏幕上超出边界

参考效果 #

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