Question

我使用twitter bootstrap构建网站，并且我已经实现了视频背景。但是，视频似乎只是在页面上的内容（以及导航）前面。我试过z-index但没有成功。应该很容易，但我无法弄清楚发生了什么。 HTML和CSS的代码如下。

<body class="background home">
   <video autoplay id="video-background" >

   <source src="./video/beach.mp4" type="video/mp4" />

    <div class="container">
      <div class="header clearfix">
        <nav>
          <ul class="nav nav-pills pull-left">
            <li role="presentation" class="active"><a href="index.html">home</a></li>
            <li role="presentation"><a href="artists.html">artists</a></li>
            <li role="presentation"><a href="#">releases</a></li>
            <li role="presentation"><a href="#">contact</a></li>
          </ul>
        </nav>
        <h3 class="text-muted"></h3>
      </div>

      <div class="jumbotron">
        <h1><img class="logo img-responsive" src="./images/elements-logo-bw-small.png" align="center"></h1>
        <p class="lead">3Bridge Records was founded by Greg Cuoco and Eric Shans as a subdivision of 3Bridge Records to focus on the downtempo and ambient sides of electronic music. Our first releases can be found on all retail outlets. See below.</p>

     </div>



      <footer class="footer">

      </footer>

    </div> <!-- /container -->
   </video>
  </body>  

/*CSS*/
video {
  min-width:100%
  min-height:100%;
  height:auto;
  width:auto;
  background:url('../video/beach.mp4') no-repeat;
  background-size:cover;
  z-index: -100;
  position: fixed;
}

.background.home {
   background:url('../images/background-1.jpg');
   background-size: fixed;
   background-repeat: repeat;
}

.background.artists {
   background:url('../images/background-3.jpg');
   background-size: cover;
   background-repeat: repeat;
}

.jumbotron {
   background:none;
}

.jumbotron .logo {
  margin:-50px auto 0 auto;
}

.jumbotron p {
  color:#fff;
  font-size:16px;
  font-family: 'Montserrat', sans-serif;
}

.jumbotron .item {
  margin:20px 0 0 30px;
}

.header.clearfix {
    background: rgba(2, 0, 0, 0.2);
}

.nav > li >a {
  color:#fff;
  font-size:14px;
  font-family: 'Montserrat', sans-serif;
}

.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
   color:#fff;
}

.nav-pills > li a:hover {
   color:#000;
}

.row.marketing {
   color:#fff;
}

Answer 1

简单地说，除了所需的<video>标记外，您无法在<source>标记中插入任何内容。

这里我有一些小样本：

＆＃13;

.content{position:absolute; top:10%; left:10%; width:80%; height:80%; background:rgba(255,0,0,0.5);}
.menu{position:absolute; top:10%; left:10%; width:80%; height:30px; background:green;}
#video{width:200%; height:200%; position:absolute; top:-50%; left:-50%;}
body{width:100%; height:100%; overflow:hidden;}

＆＃13;

<video id="video" loop="" autoplay="" muted="">
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
</video>
<div class="content">
<div class="menu">

</div>
</div>

＆＃13;

视频背景显示在网页

1 个答案: