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没有运气，这里有一个指向codepen的链接：

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

非常感谢。

Answer 1

以下是 Working Fiddle

问题在于你必须使用pseudo elements overlaying而不是不透明度，并使用第二个section和position:absolute以及第一个section {1}}使用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

1 个答案: