在 bootstrap 中的视频上创建叠加层

Question

我正在尝试将视频用作 div 中的背景，但我无法显示 div 的内容视频叠加层..

这是我的 HTML:

您的浏览器不支持视频标签。我建议你升级你的浏览器。

    <div class="container text-center">
        <h1>Personal Portfolio</h1>
        <p>Graphic design, Web developement & Social Media</p>
        <img class="image-responsive" src="https://s32.postimg.org/qrpva9fed/profile.jpg" style="border-radius:50%; width:15%">
    </div><!-- End container -->
</div><!-- End jumbotron-->

这是我的 CSS:

    .jumbotron{
  position: relative;
  overflow: hidden;
}
.container .text-center{
  z-index: 1000 !important;
}
#video-background {
  position: absolute; 
  background: #222;
    width:100%;
    background-size: cover;
    transition: 1s opacity;
    opacity: 0.7;
    top: 0;
    left: 0;
}

我尝试过使用 z-index 但没有成功，这里是 link 代码笔：

https://codepen.io/Alique/pen/JKRxZd

非常感谢。

Answer 1

造成问题的是你必须使用 pseudo elements 来获得 overlaying 而不是不透明度，并且还要使用第二个 section 和 position:absolute 以及第一个 section 和 position:relative，以便第二个 section 位于第一个 section 的顶部，然后 z-index 将按您的需要工作。

HTML

将您的 video 包裹在 div

中

<div class="video-background">
<video autoplay="" loop="" class="fillWidth fadeIn animated" poster="https://s3-us-west-2.amazonaws.com/coverr/poster/Traffic-blurred2.jpg" id="video-background">
<source src="https://s3-us-west-2.amazonaws.com/coverr/mp4/Traffic-blurred2.mp4" type="video/mp4">Your browser does not support the video tag. I suggest you upgrade your browser.

CSS

.jumbotron{
  position: relative;
  overflow: hidden;
  padding:0px !important;
 }
.container .text-center{
  z-index: 1000 !important;
}
.video-background:before{
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 position: absolute;
 content: "";
 background-color: #000;
 opacity: 0.39;
 z-index: 6;
}
.video-background {
  position: relative; 
 background: #222;
width:100%;
z-index:5;
  }
#video-background{
 background-size: cover;
transition: 1s opacity;
}

.cover-text{
position:absolute;
width:100%;
text-align:center;
z-index:9999;
top:5em;
}

.cover-text h1, .cover-text p{
color:#fff !important;
 }

在 bootstrap 中的视频上创建叠加层

Create overlay on video in bootstrap

twitter-bootstrap

responsive