如何将导航栏与视频背景一起放置?
How to put navbar with video background?
我是 Bootstrap 的新手,我尝试实现一个带有视频背景的代码 navbar
。
我尝试过的:
HTML代码:
<html>
<head>
<title>Medical</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="CSS/wstyle.css">
</head>
<body>
<section class="section-header">
<div class="container">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="images/LOGO.png" style="width:60%" ;>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item pl-4 pl-2 active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item pl-4 pl-2">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</section>
<section class="video-bg">
<div class="container">
<video id="video" autoplay loop>
<source src="video/video.mp4" type="video/mp4">
</video>
</div>
</section>
<div id="location" class="container">
<img src="images/image1.PNG" alt="IMAGE" width="100%" height="600px">
</div>
</body>
</html>
我已将 CSS 文件 (wstyle.css) 包含在文件夹 CSS 中,将视频 (video.mp4) 包含在视频文件夹中。
CSS 代码为:
CSS (wstyle.css)
.video-bg{
position:fixed;
z-index: -1;
}
现在,视频在 Internet Explorer 和 Google Chrome 中的播放方式不同,而且视频不作为导航栏的背景播放。如何让视频作为导航栏的背景播放?
类似这样。
.navigation{
padding-top:30px;
padding-bottom:20px;
position:absolute;
top:0;
width:100%;
z-index:1;
background-color: rgba(0,0,0,0.3); /** Change value according to you transperncy**/
}
.navbar-right{
float:right;
padding-right:10%;
}
.navbar-right a{
text-decoration:none;
padding:10px;
color: #fff;
font-family:Arial;
font-weight:900;
}
.navbar-right a:hover{
text-decoration:underline;
}
.navbar-logo{
padding-left:10%;
font-family:Arial;
font-size:30px;
font-weight:bold;
text-decoration:none;
color:#fff;
}
.video-container {
z-index: -100;
width:100%;
height:75%;
overflow:hidden;
position:absolute;
top:0;
left:0;
}
#video-bg{
width:100%;
}
.portfolio-section{
margin-top:50%;
}
.tagline-left{
float:left;
width:50%;
text-align:center;
}
.tagline-right{
float:right;
width:50%;
text-align:center;
}
.tagline-video{
width:75%;
}
.tagline-right-text{
position:absolute;
margin-top:9%;
text-align:center;
margin-left:17%;
font-family:Arial;
color:#fff;
width:290px;
font-size:40px;
}
.tagline-left-text{
position:absolute;
margin-top:9%;
text-align:center;
margin-left:11%;
font-family:Arial;
color:#fff;
width:375px;
font-size:40px;
}
a{
text-decoration: none !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
</style>
<header>
<div class="header">
<nav class="navigation">
<a href="#" class="navbar-logo">Logo</a>
<div class="navbar-right">
<a href="#">About</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</div>
</nav>
<div class="video-container">
<video autoplay loop muted id="video-bg">
<source src="//vimeo-hp-videos.global.ssl.fastly.net/3/3.mp4" type="video/mp4">
</video>
</div>
</div>
</header>
</body>
</html>
告诉我这就是你想要的
我是 Bootstrap 的新手,我尝试实现一个带有视频背景的代码 navbar
。
我尝试过的:
HTML代码:
<html>
<head>
<title>Medical</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="CSS/wstyle.css">
</head>
<body>
<section class="section-header">
<div class="container">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="images/LOGO.png" style="width:60%" ;>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item pl-4 pl-2 active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item pl-4 pl-2">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</section>
<section class="video-bg">
<div class="container">
<video id="video" autoplay loop>
<source src="video/video.mp4" type="video/mp4">
</video>
</div>
</section>
<div id="location" class="container">
<img src="images/image1.PNG" alt="IMAGE" width="100%" height="600px">
</div>
</body>
</html>
我已将 CSS 文件 (wstyle.css) 包含在文件夹 CSS 中,将视频 (video.mp4) 包含在视频文件夹中。
CSS 代码为:
CSS (wstyle.css)
.video-bg{
position:fixed;
z-index: -1;
}
现在,视频在 Internet Explorer 和 Google Chrome 中的播放方式不同,而且视频不作为导航栏的背景播放。如何让视频作为导航栏的背景播放?
类似这样。
.navigation{
padding-top:30px;
padding-bottom:20px;
position:absolute;
top:0;
width:100%;
z-index:1;
background-color: rgba(0,0,0,0.3); /** Change value according to you transperncy**/
}
.navbar-right{
float:right;
padding-right:10%;
}
.navbar-right a{
text-decoration:none;
padding:10px;
color: #fff;
font-family:Arial;
font-weight:900;
}
.navbar-right a:hover{
text-decoration:underline;
}
.navbar-logo{
padding-left:10%;
font-family:Arial;
font-size:30px;
font-weight:bold;
text-decoration:none;
color:#fff;
}
.video-container {
z-index: -100;
width:100%;
height:75%;
overflow:hidden;
position:absolute;
top:0;
left:0;
}
#video-bg{
width:100%;
}
.portfolio-section{
margin-top:50%;
}
.tagline-left{
float:left;
width:50%;
text-align:center;
}
.tagline-right{
float:right;
width:50%;
text-align:center;
}
.tagline-video{
width:75%;
}
.tagline-right-text{
position:absolute;
margin-top:9%;
text-align:center;
margin-left:17%;
font-family:Arial;
color:#fff;
width:290px;
font-size:40px;
}
.tagline-left-text{
position:absolute;
margin-top:9%;
text-align:center;
margin-left:11%;
font-family:Arial;
color:#fff;
width:375px;
font-size:40px;
}
a{
text-decoration: none !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
</style>
<header>
<div class="header">
<nav class="navigation">
<a href="#" class="navbar-logo">Logo</a>
<div class="navbar-right">
<a href="#">About</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</div>
</nav>
<div class="video-container">
<video autoplay loop muted id="video-bg">
<source src="//vimeo-hp-videos.global.ssl.fastly.net/3/3.mp4" type="video/mp4">
</video>
</div>
</div>
</header>
</body>
</html>
告诉我这就是你想要的