如何放置带有视频背景的导航栏？答案

【问题标题】：How to put navbar with video background?如何放置带有视频背景的导航栏？
【发布时间】：2021-08-17 15:45:49
【问题描述】：

我是 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 中的播放方式不同，视频也不会作为导航栏的背景播放。如何让视频播放作为导航栏的背景？

【问题讨论】：

标签： html css bootstrap-4 background nav

【解决方案1】：

类似的东西。

    .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>

告诉我这就是你想要的

【讨论】：

如果你想要别的东西，请告诉我:)
这显示带有视频背景的文本，我想要带有视频作为背景的导航栏
等一下。
反应灵敏吗？
现在检查一下，我更新了我的代码，是的，它是响应式的，如果这对你有用，别忘了验证我的答案。