内容显示在巨无霸电影里

Question

我按照这个答案的建议，用引导程序在我的巨型加速器里放映了一部背景电影：

https://stackoverflow.com/a/34624728/9072894

问题是网站的内容显示在巨无霸/电影中。这里有一把小提琴，说明了这个问题：

iv/kae4q601/228/

例如，下面<p>中的内容出现在巨型加速器中：

<div class="jumbotron">
  <video id="video-background" preload muted autoplay loop>
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  </video>
  <div class="container">
    Hello World. I am in the jumbotron. As I should be.
  </div>
</div>

<p>
Here is my content. It inside the jumbotron. I want it to be outside the jumbotron.
</p>

我怎样才能制作出界限清晰的巨无霸/电影？例如，我的网站的主要内容，就像这个简单示例中的<p>中的内容，出现在巨无霸加速器之外吗？“你好世界”的本意是在巨无霸的内部。

Answer 1

它没有工作，因为它有一个fixed的位置。

根据你的要求。您甚至不需要引导jumbotron，也可以使用普通的css实现同样的功能，并且可以使用absolute定位将元素放置到video元素中。检查片段。

​

#video-background { 
  overflow: hidden;
  z-index: -100;
  width:100%;
  height: 100%;
}

.div--wrapper {
  position: absolute;
  top: 50px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div>
  <video id="video-background" preload muted autoplay loop>
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  </video>
  <div class="div--wrapper">
    Hello World. I am in the jumbotron. As I should be.
  </div>
</div>

<p>
Here is my content. It outside the jumbotron as it is intended to be.
</p>

​