Question

我的代码：

<!-- 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来添加文本时，它会落后于背景。

Answer 1

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

#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; }

背景覆盖了我在引导程序中的jumbotron

1 个答案: