視頻疊加的Bootstrap導航欄 - 如何用不透明背景疊加它？

Question

我有此代碼：https://jsfiddle.net/j712e84o/4/

我想在導航欄上添加視頻。我用css代碼來完成它的覆蓋。

top：-100px;

現在我試圖通過運行以添加不透明背景：

背景色：RGBA（0，0，0，0.5）;

1. 我試圖通過index-z來克服它，但它沒有奏效。我正面臨的下一個問題是視頻和下一段之後的100px白色差距。

+。導航欄應該擠壓移動設備，但它沒有。

你能幫我嗎？這裏是代碼

視頻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