Question

我想在透明背景上创建一个导航栏，但是当我创建导航栏时，它也会获得背景图像的属性。有人可以帮我解决这个问题吗？

这是菜单的HTML：

<section>  
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">

      <div class="navbar-header">
        <img src="logo.png" style="padding-left: 50px; margin-top: 5%">
      </div>  

      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#" style="color: white"> HOME</a></li>
        <li><a href="#" style="color: white"> SERVICES</a></li>
        <li><a href="#" style="color: white"> ABOUT</a></li>
        <li><a href="#" style="color: white"> TESTIMONIALS</a></li>
        <li><a href="#" style="color: white"> CONTACT</a></li>
      </ul>

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

这是CSS：

.navbar {
  background:transparent;
  background-image:none;
  border-color:transparent;
  box-shadow:none;        
}

.active {
  background-color: white;
}
{
  box-sizing: border-box;        
}

body {         
  font-family: Arial;
  font-size: 17px;
}       

.container-fluid {
   position: relative;
   padding-left: 0px;   
}      

.container-fluid img {
  vertical-align: middle;
}

.container-fluid .content {
  position: absolute;
  bottom: 0;
  background: rgba(0,178,170,0.5); /* Black background with transparency */
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
  height: 500px;
}

Answer 1

请使用navbar-light或navbar-dark，以便链接颜色与背景图片或颜色的对比度起作用有点像这样：

<nav class="navbar navbar-light transparent">

或

<nav class="navbar navbar-dark transparent">

Answer 2

使用背景覆盖的背景图像的最佳方法。

.image {
  background-color: #490d40;
  background: url(https://sonorangirl.github.io/Earth-Quotes/img/google-earth-view-South-Iceland3.jpg)
    no-repeat center center;
  background-size: cover;
  height: 200px;
  position: relative;
}
.image:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: rgba(51, 23, 14, 0.6);
}
.navbar {
  height: 80px;
  background-color: transparent;
  border: none;
  color: white;
  z-index: 100;
  transition: background-color 1s ease 0s;
}
.navbar-default .navbar-brand {
  margin-top: 10px;
  color: white;
}
.navbar-default .navbar-nav > li > a {
  color: white;
  padding: 10px 20px;
  margin: 10px 5px 5px 5px;
}
.navbar-default .navbar-nav > li > a:hover {
  background-color: #000;
  color: #fff;
}

<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="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 class="navbar-brand" href="#">Logo</a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">About</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Another Link</a></li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
  </nav>
  <div class="image"></div>
</body>

demo

Answer 3

我在header元素中添加了一个类section，其中包含导航栏并添加了此样式：

.header { position: relative; z-index: 2; }

标题会将自己置于背景之上。

示例：https://jsfiddle.net/y817zo62/

Navbar获取背景图像的属性

3 个答案: