CSS3 背景渐变叠加 HTML5 视频

Question

我想对视频应用 CSS3 渐变叠加。我感觉这可能与 z 索引/堆栈顺序有关，所以这是我的代码。

div结构：

<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 中拉出，因此它可以显示在它上面。

希望对你有所帮助。

Answer 2

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

将视频移出渐变 div，现在使用 position: absolute 将渐变放置在视频上，因为您有 z-index: 10;，它应该正确覆盖视频。

如果您实际上将.gradient 固定在height 和width 上，那么您很可能会遇到此解决方案的一个问题，它将覆盖视频控件并且它们将不可点击。

Answer 3

试试这个

为视频添加兄弟姐妹，使其成为position:absolute 并添加z-index

.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    //padding: 20px;
    border-radius: 5px;
    background-attachment: scroll;
    overflow: hidden;
}
.wrapper video {
    min-width: 100%;
    min-height: 100%;
    position: relative;
    z-index: 1;
}
.wrapper .overlay {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
   background-image: 
        radial-gradient(
            circle at 36% 48%, #000000, 
            rgba(11, 39, 65, 0.32) 87%, 
            rgba(0, 0, 0, 0.0)
        );
}

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