如何在 css 中将文本放在背景视频之上的渐变上？

Question

我有一个在用户打开页面时播放的视频，因此视频在背景中，文本可以显示在顶部。

现在一切正常，但我想在视频上添加一个 gradient 以使底部的文本始终可见，就像处理图像一样。

但是，我似乎找不到适合我的解决方案。如果代码有点不专业，请见谅，我是大一学生。

.container-video {
  position: relative;
  /* background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.01),
    rgba(0, 0, 0, 0.7)
  );
  z-index: 99; */
}

#background-video {
  /* video itself */
  width: 100vw;
  /* viewport width */
  height: 50vh;
  /* viewport height */
  object-fit: cover;
  z-index: 0;
}

.overlay {
  /* text on top of the video */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  margin-top: 280px;
}

<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>
  <div class="overlay">
    <h1>Meteor dodge</h1>
    <p>Available on PS5, PS5, Xbox & PC</p>
    <p>.99</p>
    <a href="inlogForm.html">Kopen</a>
  </div>
</header>

Answer 1

您可以尝试在顶部设置一个 div 低不透明度，并将 div 的背景设置为您想要的渐变。确保将 position: relative 设置为 div。

亲切的问候

埃米尔

Answer 2

您应该使用 position:absolute 和 z-index.

清晰且合乎逻辑地对容器进行分层

注意，在 HTML 中，我首先创建了一个 outer-container （只需将 outer-container class 添加到您现有的 header) 定义内部容器所在的盒子。

这个外部容器必须 position: nonstatic （其中“非静态”可以是“相对的”、“绝对的”、“固定的”- 除了静态的任何东西 - “静态”是默认值 -因为如果 outer-container 留在 position:static 处，内部容器的 position:absolute 将无法正常工作。

然后每个内部容器 position: absolute 和 top/left/width/height 设置为相同的值。我添加了 classes container-bottom、container-middle、container-top 以便 identify/style 变得非常容易。然后，只需使用 z-index 按所需顺序对它们进行分层。

请注意，创建了一个中间容器，我们在其上放置了渐变。这就是中间 layer/container 所做的全部。

/* Unnecessary JS that replaces the un-accessible poster/video links FOR THIS DEMO ONLY */
const $ = document.querySelector.bind(document);
document.addEventListener('DOMContentLoaded', () => {
  $('#background-video').setAttribute('poster', 'https://ourtube.co.uk/upload/photos/2021/11/928b8656defe100bf7c75815db0edf992b1e33d2wK9QTHR7ny9ahCHqPYKf.video_thumb_5245_11.jpeg');
  $('#background-video').removeAttribute('muted');
  $('source').setAttribute('src','https://ourtube.co.uk/upload/videos/2021/11/nHtqkPbgFOHOofoBv7Sr_04_f233dfb6c94f3cc02cf8866c246900b8_video_240p_converted.mp4#t=15');
  
  setTimeout(() => {
    $('#background-video').play();
  },1000);
});

.outer-container{
  position:relative;
  width: 99vw;
  height: 50vh;
}
.bottom-container{
  z-index: 0;
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.middle-container{
  /* gradient overlay */
  z-index: 1;
  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.99)
  );
}
.top-container{
  z-index: 2;
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

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

.overlay {
  /* text on top of the video */
  display: grid;
  place-content: center;
  color: yellow;
  xxmargin-top: 280px;
}
a{
  color:pink;
}

<header class="outer-container">
  <div class="bottom-container 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>
  <div class="middle-container"></div>
  <div class="top-container overlay">
    <div>Meteor Dodge</div>
    <div>Available on PS5, PS5, Xbox & PC</div>
    <div>.99</div>
    <a href="inlogForm.html">Kopen</a>
  </div>
</header>

请注意，添加到演示中的 javascript 是不必要的，仅用于替换无法访问的（本地）链接。这样做是为了让您可以看到一切按预期工作。另外，我只用 div 替换了你的 H1、P 标签，这样它们在微型 RunCodeSnippets 演示 window.

中显示得更好

Answer 3

这是最终为我工作的 CSS：

.container-video {
  position: relative;
  width: 100%;
}

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

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  margin-top: 280px;
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 1)
  );
  width: 100%;
  padding-bottom: 30px;
}

如何在 css 中将文本放在背景视频之上的渐变上？

How do I put text on a gradient overtop a background video in css?

html

css

gradient

html5-video