我的代码:

<!-- Navbar -->
<nav class="navbar navbar-fixed-top" id="my-navbar">
   <div class="container">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
         </button>
         <a href="" class="navbar-brand"><img style="max-width:100px; margin-top: -7px;" src="images/firma-Edgar-Ayales.png" alt=""></a>
      </div>
      <!--End navbar-header-->
      <div class="collapse navbar-collapse navbar-right" id="navbar-collapse">
         <ul class="nav navbar-nav">
            <li><a href="#portfolio">Feedback</a>
            <li><a href="#features">Gallery</a>
            <li><a href="#gallery">Features</a>
            <li><a href="#feedback">Faq</a>
            <li><a href="#contact">ContactUs</a>
         </ul>
      </div>
      <div>
      </div>
   </div>
   <!-- End container -->
</nav><!-- End navbar -->

<div class="jumbotron">
   <div class="container">
      <h1>Transformamos tus ideas en atractivos diseños</h1>
   </div>
</div>


文本在背景后面。我希望网页的第一部分是背景,包括导航栏。 CSS是:

.navbar {
   background: rgba(0, 0, 0, 0);
   font-size: 10pt;
   text-transform: uppercase;
}

.navbar-nav > li > a {
   color: white;
   font-family: "Tahoma", sans-serif;
   font-weight: bold;
}

#my-navbar {
   background: url(images/bgfix.jpg) no-repeat;
   height: 700px;
   background-size: cover;
   background-position: center;
   position: absolute;
}

#titulobg {
   text-align: center;
   padding-top: 450px;
   color: black;
   font-family: "Nunito", sans-serif;
}

.jumbotron {
   color: white;
   text-shadow: black 0.3em 0.3em 0.3em;
   background: transparent;
}


另外,当我尝试添加新的div以添加文本时,它会在背景后面出现。

最佳答案

我假设您是从“ navbar”扩展“ my-navbar”。它继承了导航栏的所有属性,包括高z索引。 Z-index只是告诉浏览器什么重叠。低z索引用于背景,高z索引用于前景。

#my-navbar{
    background:url(images/bgfix.jpg) no-repeat;
        height: 700px;
        background-size: cover;
        background-position: center;
        position: absolute;
        z-index: -1;
    }


编辑:
相对位置

#my-navbar{
        background:url(images/bgfix.jpg) no-repeat;
            height: 700px;
            background-size: cover;
            background-position: center;
            position: relative;
            z-index: -1;
        }


编辑2:删除顶部的恼人的白色绝对条。

body {
  padding-top: 0px;
}

09-20 23:08