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

Question

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

3

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

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

- iqra shaheen

1

你目前尝试了什么？能分享一下你当前的尝试代码吗？ - Luca

给你的导航栏设置背景颜色。 - Master.Deep

2

请阅读 [ask] 和 [mcve]。 - CBroe

@Luca 他更新到哪里了？ - iqra shaheen

@iqrashaheen的回答已于7分钟前更新。这是该问题的2个答案之一。 - Luca

显示剩余8条评论

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mohd Tabish Baig · Answer 1

0

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

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

或者

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

- Mohd Tabish Baig

如何在这里分享整个代码？我应该发表为评论吗？ - iqra shaheen

编辑您的问题，粘贴HTML、CSS和脚本，然后您将获得如何突出显示代码的提示：选择您的代码，然后使用编辑器上方的{}按钮。 - Mohd Tabish Baig

不要在评论中发布，编辑问题会对其他用户有所帮助 - Mohd Tabish Baig

请按照 @MatthiasSeifert 建议的方式浏览教程页面，或者前往 fiddle 将您的代码粘贴在那里，为其命名并进行 FORK，然后在此处分享链接。 - Mohd Tabish Baig

@MohdTabishBaig 现在请解决我的问题，我不想让导航栏获取图像的属性。 - iqra shaheen

显示剩余3条评论

- LS_ · Answer 2

我已经在包含导航栏的

元素中添加了一个名为

的类，并添加了以下样式：

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

标签将位于背景上方。

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

- shahid · Answer 3

使用背景图像和背景叠加的最佳方法。

.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