导航栏叠加的背景颜色和图像

问题1： 我想有div的背景颜色&背景图片（顶部横幅），顶我的导航栏粘贴覆盖了现在，当我向下滚动。代替背景颜色会覆盖我的导航条。导航栏叠加的背景颜色和图像

我该如何做到这一点，我的导航栏将在div class top-banner的背景色之上。

有1个更多的问题，这是我的导航栏那种不舍自身缘，当我添加数据间谍词缀，稍导航栏移动到右边，左边导致空白，当我重新调整我的屏幕更小的设备尺寸，导航栏折叠菜单是不可点击的，除非我点击到最右端，然后切换菜单。我不确定为什么词缀有这样的问题。我如何解决它。

感谢帮助解决此问题！

下面是我的代码

<html> 
    <head> 
    <title>Demo</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <style type="text/css"> 
    .navbar-header, 
    .navbar-brand { 
     line-height: 100px; 
     height: 100px; 
     padding-top: 0; 
    } 
    .affix .navbar-default { 
     position: fixed !important; 
     top: 0 !important; 
     width: 100% !important; 
     background-color: #957595 !important; 
    } 
    .affix { 
     width: 100% !important; 
    } 
    @media screen and (min-width: 768px) { 
    .navbar-header { 
     padding-left: 200px; 
     text-align: center; 
    } 
    } 
.top-banner{ 
    background-color: #b0c4de; 
    background-image: url("bi-uk-office7-2.jpg"); 
    background-repeat: no-repeat; 
    background-position: right top; 
} 
    </style> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    </head> 
    <body> 
    <div class="container-fluid"> 
      <!-- Static navbar --> 
     <div id="nav" data-spy="affix"> 
      <nav class="navbar navbar-default" style="background-color:black;background: rgba(0,0,0,0.9);"> 
      <div class="container-fluid"> 
       <div class="navbar-header 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 class="navbar-brand" href="#">Logo</a> 
       </div> 
       <div id="navbar" class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li><a href="#"><font color="white">Link 1</font></a></li> 
        <li><a href="/list"><font color="white">Link 2</font></a></li> 
        <li><a href="/list"><font color="white">Link 3</font></a></li> 
       </div><!--/.nav-collapse --> 

    </div> 
     </nav> 
</div> 

<section> 
<div class="col-xs-12"> 

<div class="top-banner"> 
Hello world<br/> 
Hello world<br/> 
Hello world<br/> 
Hello world<br/> 
Hello world<br/> 
Hello world<br/> 
Hello world<br/> 
Hello world<br/> 
Hello world<br/> 
Hello world<br/> 
Hello world<br/> 
Hello world<br/> 
<hr> 
</div> 

</div> 
</section> 



</div> 
</body> 
</html>

来源

2015-05-12 Hyde Han Fu

添加z-index您#nav下面是在顶部和margin-left属性添加到同一留极端的离开，因为它是从它的父越来越填充container-fluid

#nav 
{ 
    z-index:1000; 
    margin-left: -15px; 
}

来源

2015-05-12 04:00:20

导航栏叠加的背景颜色和图像

回答

相关问题