javascript - 视频覆盖的 Bootstrap 导航栏 - 如何用不透明背景覆盖它？

Question

我有这个代码:https://jsfiddle.net/j712e84o/4/

我想在我的导航栏上添加一个视频。我通过 css 代码覆盖它来完成它。

top: -100px;

现在我试图通过运行来添加不透明背景:

background-color:rgba(0, 0, 0, 0.5);

1. 我试图通过 index-z 克服它，但没有成功。我面临的下一个问题是视频和下一段之后的 100 像素白色间隙。

+。导航栏应该为移动设备挤压，但它没有。

你能帮帮我吗？这是代码

视频 CSS:

.covervid-video {
  position: relative;
  right: 0;
  bottom: 0;
  width: 100%    !important;
  height: auto   !important;
  z-index: 10;
  top: -100px;
  background-size: cover;
}

导航栏 CSS:

html,
body {
    overflow-x: hidden; /* Prevent scroll on narrow devices */
}
body {
    padding-top: 100px;
    height: -116px;
}
footer { padding: 30px 0; }

.navbar-brand { font-size: 24px; }

.navbar-container { padding: 20px 0 20px 0; }

.navbar.navbar-fixed-top.fixed-theme {
    background-color: #FFF;
    border-color: #373737;
    box-shadow: 0 0 2px rgba(0,0,0,.8);
}

.navbar-brand.fixed-theme { font-size: 18px; }
.navbar-container.fixed-theme { padding: 0; }

.navbar-brand.fixed-theme,
.navbar-container.fixed-theme,
.navbar.navbar-fixed-top.fixed-theme,
.navbar-brand,
.navbar-container{
    transition: 0.8s;
    -webkit-transition:  0.8s;
}

导航栏 JS:

$(document).ready(function(){

/**
 * This object controls the nav bar. Implement the add and remove
 * action over the elements of the nav bar that we want to change.
 *
 * @type {{flagAdd: boolean, elements: string[], add: Function, remove: Function}}
 */
var myNavBar = {

    flagAdd: true,

    elements: [],

    init: function (elements) {
        this.elements = elements;
    },

    add : function() {
        if(this.flagAdd) {
            for(var i=0; i < this.elements.length; i++) {
                document.getElementById(this.elements[i]).className += " fixed-theme";
            }
            this.flagAdd = false;
        }
    },

    remove: function() {
        for(var i=0; i < this.elements.length; i++) {
            document.getElementById(this.elements[i]).className =
                    document.getElementById(this.elements[i]).className.replace( /(?:^|\s)fixed-theme(?!\S)/g , '' );
        }
        this.flagAdd = true;
    }

};

/**
 * Init the object. Pass the object the array of elements
 * that we want to change when the scroll goes down
 */
myNavBar.init(  [
    "header",
    "header-container",
    "brand"
]);

/**
 * Function that manage the direction
 * of the scroll
 */
function offSetManager(){

    var yOffset = 0;
    var currYOffSet = window.pageYOffset;

    if(yOffset < currYOffSet) {
        myNavBar.add();
    }
    else if(currYOffSet == yOffset){
        myNavBar.remove();
    }

}

/**
 * bind to the document scroll detection
 */
window.onscroll = function(e) {
    offSetManager();
}

/**
 * We have to do a first detectation of offset because the page
 * could be load with scroll down set.
 */
offSetManager();
});

HTML

<!-- Fixed navbar -->
<nav id="header" class="navbar navbar-fixed-top">
  <div id="header-container" class="container navbar-container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a id="brand" class="navbar-brand" href="/">CV Star</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse pull-right">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/">Domů</a></li>
        <li><a href="#about">Služby</a></li>
        <li><a href="#contact">Kontakt</a></li>
        <li><a href="#" class="btn-primary" type="button">CV Review</a></li>
      </ul>
    </div><!-- /.nav-collapse -->
  </div><!-- /.container -->
</nav><!-- /.navbar -->
<!-- </div> -->

<video autoplay="" class="covervid-video" loop="" poster="img/video-fallback.png">
  <source src="videos/clouds.webm" type="video/webm"><source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
</video>

<p>
- What is the white gap above?<br>
- Why the menu does not show on mobile devices in one button?<br>
</p>

谢谢

Answer 1

在视频前添加一个绝对位置叠加div..

<div id="overlay"></div>
<video>..</video>

#overlay {
  background-color: rgba(0,0,0,0.5);
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index:11;
}

演示:http://bootply.com/LJxKFcJ6ts