Question

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

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)
        );
    }

样式应用于渐变div以及position：relative;和z-index：10;使渐变覆盖视频。

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

Answer 1

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

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

此解决方案的一个问题是，如果您确实将.gradient修复为height＆amp; width它将涵盖视频控件，但不会被点击。

Answer 2

试试这个

为视频添加一个兄弟，使其position:absolute并添加z-index

＆＃13;

.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)
        );
}

＆＃13;

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

＆＃13;

Answer 3

您必须将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.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=http://techslides.com/demos/sample-videos/small.webm type=video/webm> </video>
</div>

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

希望它会有所帮助。

CSS3背景渐变叠加HTML5视频

3 个答案: