导航栏获取背景图片的属性答案

【问题标题】：Navbar gets properties of background image导航栏获取背景图片的属性
【发布时间】：2018-11-15 17:20:57
【问题描述】：

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

这是菜单的 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;
}

【问题讨论】：

到目前为止你尝试过什么？你能分享你当前尝试的代码吗？
为您的导航栏提供背景颜色
请阅读How to Ask和minimal reproducible example。
@Luca 我不知道如何发布代码，请您指导
@iqrashaheen 我已将代码编辑到问题中，如果您接受，代码将在那里。我必须添加一些额外的文本才能让我的编辑被接受，但没有太大变化（希望如此）

标签： html css twitter-bootstrap

【解决方案1】：

请使用navbar-light 或navbar-dark 以使链接颜色与背景图像或颜色的对比度形成对比有点像这样：

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

或

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

【讨论】：

它不起作用，我想要透明背景和导航栏在该背景上，但是当我制作导航栏时，导航栏也会获得背景颜色
好的，请分享您的代码，这将有助于用户解决您面临的问题
如何在这里分享整个代码？我应该发表评论吗？
编辑您的问题，粘贴 html、css 和脚本，您将获得如何突出显示代码的提示：选择您的代码，然后使用编辑器上方的 {} 按钮
不要把它作为评论发布，在你的问题中编辑它，这对其他用户也有帮助

【解决方案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

【讨论】：

为什么有人需要z-index 或999？

【解决方案3】：

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

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

标题将自己定位在背景之上。

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

【讨论】：