0
我使用twitter引導來建立一個網站,我已經實現了一個視頻背景。然而,視頻似乎只是在頁面上的內容(以及導航)。我試過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;
}
謝謝你 - 我只是需要移動的內容上面的視頻標籤。欣賞幫助 – erics15
當然,很高興幫助:)只是請,如果這解決了您的問題,標記這個答案被接受投票箭頭:) – Zorak