我正在使用 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;
}
最佳答案
简单地说，你不能在<video>中插入任何内容标签，除了需要的 <source>标签。
这里我有一个小样本给你:
.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;}<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>关于html - 视频背景显示在网页内容之上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46014430/