CSS如何在背景视频上方添加渐变层并在渐变上叠加文本？

解决方案 #

核心问题原因

你之前写在容器上的渐变未生效，是因为视频作为子元素层级高于容器背景，直接覆盖了渐变效果，同时你之前设置的z-index逻辑也有问题，会导致渐变反而盖住文字。

修改步骤

1. 调整HTML结构，把文字层.overlay放到视频容器内部，让所有元素的定位基准统一，避免错位：

<header>
  <div class="container-video">
    <video id="background-video" autoplay loop muted poster="images/Placeholder_videoPic.png">
      <source src="videos/Placeholder_Video_trim.mp4" type="video/mp4" />
    </video>
    <div class="overlay">
      <h1>Meteor dodge</h1>
      <p>Available on PS5, PS5, Xbox & PC</p>
      <p>$14.99</p>
      <a href="inlogForm.html">Kopen</a>
    </div>
  </div>
</header>

2. 修改CSS代码，用伪元素实现渐变层，调整层级顺序：从下到上依次为视频→渐变层→文字，保证渐变在两者中间：

.container-video {
  position: relative;
  width: 100vw;
  height: 50vh;
}

#background-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 0;
}

/* 渐变层用伪元素实现 */
.container-video::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 你需要的渐变效果 */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.01),
    rgba(0, 0, 0, 0.7)
  );
  z-index: 1;
}

.overlay {
  position: absolute;
  /* 用bottom定位比固定margin-top更稳妥，文字始终在视频底部 */
  bottom: 20px;
  left: 0;
  z-index: 2;
  padding-left: 20px; /* 加个左边距避免贴边，可自行调整 */
}

效果说明

修改后渐变层会叠加在视频上方、文字下方，自动压暗视频下半部分的亮度，保证文字始终清晰可见，也不会影响视频原有播放效果。

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