Question

我正在学习引导程序并开发我的第一个网站，我有一个非常恼人的问题，试图在我的透明导航后面显示背景颜色或图像。

这是我到目前为止的html代码

<body>
    <header>
      <nav class="navbar navbar-default" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse">
              <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="#featured"><img id="main-logo" src="img/logo.svg"/></a>
          </div><!-- end of navbar-header -->
          <div class="collapse navbar-collapse" id="collapse">
            <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="#featured">Link 1</a></li>
              <li><a href="#mission">Link 2</a></li>
              <li><a href="#services">Link 3</a></li>
            </ul>        
          </div><!-- end of collapse navbar-collapse -->
        </div><!-- end of container -->
      </nav><!-- end of navigation -->
    </header>

    <div class="top-section">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="name">
              <img id="name-text" src="img/text.svg"/>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>

这是我目前的css样式表

body {
  position: relative;
}

/*--Navigation--*/

.navbar-default {
  background-color: transparent;
  border: none;
}

.nav li a {
  margin-top: 30px;
}

#main-logo {
  float: left;
}

/*--Top Section--*/

.top-section {
  background-color: #7ecaeb;
  margin-top: 80px;
  position: relative;
  background-position: center;
  background-size: cover;
}

.name {
  text-align: center;
  float: none;
}

#name-text {
  width: 300px;
  height: auto;
}

我真正想要尝试和做的只是在课程上有背景.top-section（颜色或图片取决于我的目的）在导航器后面。

我确定我只是在这里有点愚蠢，但我不知道我的生活看到我做错了什么，我还在学习这个对我来说很新鲜。

谢谢大家

CSS背景建议

0 个答案: