CSS3 背景渐变叠加 HTML5 视频

Posted 2023-05-07

【中文标题】CSS3 背景渐变叠加 HTML5 视频

【英文标题】：CSS3 Background Gradient Overlay HTML5 Video

【发布时间】：2018-04-26 02:16:42

【问题描述】：

我想对视频应用 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；使渐变覆盖视频。

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

【问题讨论】：

Overlaying a DIV On Top Of html 5 Video的可能重复

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

希望对你有所帮助。

【讨论】：

非常感谢 - 正是我所追求的。

不客气。请注意，这不是响应式的：您必须手动调整渐变的高度。我认为可以让它响应，但它会更复杂......

我现在发现这是我的问题。我拥有的视频是响应式的，并且高度在渐变之外扩展。您对此有什么想法吗？

@Filth 我当然愿意，给我一些时间 :)。你能分享视频的大小吗？

谢谢 - 视频的大小是这样的：宽度：100%；高度：计算（100vh - 80px）；最小高度：600px； -o-object-fit：覆盖；适合对象：封面；父 div 有： position: absolute;宽度：100%；希望这会有所帮助。

【参考方案2】：

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

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

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

【参考方案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>