html - CSS3 背景渐变叠加 HTML5 视频

Question

我想将 CSS3 渐变叠加应用于视频。我感觉这可能与 z-indexing/stack orders 有关，所以这是我的代码。

分区结构:

<div class="wrapper">
    <div class="gradient">
        <video></video>
    </div>
</div>

我使用的 CSS 是背景图像径向渐变:

.gradient {
        background-image: 
        radial-gradient(
            circle at 36% 48%, #000000, 
            rgba(11, 39, 65, 0.32) 87%, 
            rgba(0, 0, 0, 0.0)
        );
    }

样式与 position: relative 一起应用于渐变 div；和 z-index: 10;使渐变覆盖视频。

渐变根本没有出现——这是如何实现的？

Answer 1

2022 年更新

我们可以使用伪元素 ::after 在整个图像上显示渐变，而无需不必要的 HTML 标记。我还选择使用 aspect-ratio属性来调整视频的大小，但您可以随意使用您喜欢的任何技术。

.wrapper {
  position: relative;
  width: 100%;
}

.wrapper::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  background-image: radial-gradient(
    circle at 36% 48%,
    #000000,
    rgba(11, 39, 65, 0.32) 87%,
    rgba(0, 0, 0, 0)
  );
}

video {
  width: 100%;
  aspect-ratio: 4/3;
}

<div class="wrapper">
  <video>
    <source
      src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Dancing-for-Food-in-the-Deep-Sea-Bacterial-Farming-by-a-New-Species-of-Yeti-Crab-pone.0026243.s002.ogv"
      type="video/webm"
    />
  </video>
</div>

---

历史答案

您必须将 width 和 height 设置为包含渐变的 div 才能显示。然后，使用 z-index 将 div 放在视频的顶部

你可以这样做:

.wrapper {
  position: absolute;
  width: 100%;
}

.gradient {
  background-image: radial-gradient(
    circle at 36% 48%,
    #000000,
    rgba(11, 39, 65, 0.32) 87%,
    rgba(0, 0, 0, 0)
  );
  width: 100%;
  height: calc(100vh - 80px);
  min-height: 600px;
  object-fit: cover;
  position: relative;
  z-index: 2;
}

video {
  position: absolute;
  top: 0;
  z-index: -1;
  width: 100%;
  height: calc(100vh - 80px);
  min-height: 600px;
  object-fit: cover;
}

<div class="wrapper">
  <div class="gradient"></div>
  <video>
    <source
      src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Dancing-for-Food-in-the-Deep-Sea-Bacterial-Farming-by-a-New-Species-of-Yeti-Crab-pone.0026243.s002.ogv"
      type="video/webm"
    />
  </video>
</div>

请注意，我已将 video 元素从渐变 div 中拉出，因此它可以显示在它上面。

希望对您有所帮助。