文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS3背景梯度叠加HTML5视频

问CSS3背景梯度叠加HTML5视频
EN

Stack Overflow用户

提问于 2017-11-13 11:49:14

回答 3查看 12.2K关注 0票数 2

我想应用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)
        );
    }

样式应用于梯度div和位置:相对；和z-索引: 10；使梯度覆盖视频。

渐变根本没有出现--这是怎么实现的？

html

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-11-13 11:59:50

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中提取出来，因此它可以显示在它的顶部。

希望能帮上忙。

票数 6

Stack Overflow用户

发布于 2017-11-13 11:54:02

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

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

这个解决方案的一个问题是，如果你真的给了.gradient固定的height & width，你很可能会遇到这个问题，它会覆盖视频控件，它们不会被点击。

票数 2

Stack Overflow用户

发布于 2017-11-13 11:55:06

尝尝这个

向视频中添加一个兄弟姐妹，使其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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47263646

复制

相似问题

问CSS3背景梯度叠加HTML5视频
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS3背景梯度叠加HTML5视频EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS3背景梯度叠加HTML5视频
EN