透明的 Bootstrap 导航栏答案

【问题标题】：Transparent Bootstrap navbar透明的 Bootstrap 导航栏
【发布时间】：2018-03-18 00:41:29
【问题描述】：

我正在开发一个网站，我希望导航（仅主页）是透明的，并且图像可以覆盖全屏。这是我目前所拥有的：

导航栏以这种方式设置样式是因为它在其他页面上也是如此。

这是我的 HTML：

<div class="container-fluid">
      <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top navbar-trans" id="mainNav">

          <a class="navbar-brand js-scroll-trigger" href="#page-top">
            <img class="logo" src="app/assets/images/bunklogo.png" alt="bunk">
            Bunk.
          </a>
          <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
              Menu
              <i class="fa fa-bars"></i>
          </button>
          <div class="collapse navbar-collapse" id="navbarResponsive">
              <ul class="navbar-nav ml-auto">
                  <li class="nav-item">
                      <a class="nav-link js-scroll-trigger" href="#tenant">TENANT</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link js-scroll-trigger" href="landlord.html">LANDLORD</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link js-scroll-trigger" href="#bunkfaqs">BUNK FAQs</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link js-scroll-trigger" href="#blog">BLOG</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link js-scroll-trigger" href="#team">TEAM</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link js-scroll-trigger" href="#login">LOG IN</a>
                  </li>
                  <li class="nav-iten">
                    <button class="btn signup"> SIGN UP</button>
                  </li>
              </ul>
          </div>
      </nav>
  </div>

还有我的 CSS：

#mainNav {
  background-image: linear-gradient(90deg, #439EE0 0%, #26ADE6 100%);
  /*margin-top: -0.5%;*/
  padding-top: 1rem;
  padding-bottom: 3rem;
  margin-bottom: 0;
}

.navbar-toggler.navbar-toggler-right {
  color:white;
  border: 1px solid white;
  font-size: 1.2rem;
  padding: 1rem;
}

.navbar-light .navbar-nav .nav-link {
  font-size: 1.2rem;
  color: #ffffff;
  letter-spacing: 0.8px;
  text-align: center;
  padding-right: 5rem;
}

.navbar-brand.js-scroll-trigger {
  color: #ffffff;
  font-size: 2rem;
}

有什么建议吗？

【问题讨论】：

标签： css html bootstrap-4

【解决方案1】：

这里不需要任何自定义 css hack。

要使您的 Bootstrap 导航栏透明，您只需删除类 bg-light。

就是这样！

bg-light 中的bg 代表“背景”。因此，如果您省略了背景颜色的类，您将自动拥有一个透明的导航栏。

【讨论】：

【解决方案2】：

好的，首先您需要将主页与其他页面分开。为此，只需在您的正文部分插入一个 ID，例如 #home。

因此，在这种情况下，您将添加以下内容：

body#home #mainNav {
  background:transparent;
  background-image:none;
  position:absolute;
  width:100%;
  left:0px;
  right:0px;
  top:0px;
}

不要忘记您的 Slider（或您在 #mainNav 之后拥有的）可能需要一些等于 #mainNav 高度的 padding-top，例如（如果您的 #mainNav 高度为 50px）：

.slider {
  padding-top:50px;
}

【讨论】：

【解决方案3】：

您只能在 index.html 上为您的导航栏添加一个额外的类。（或您的主页 html 文件名。）

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top navbar-trans navbar--home" id="mainNav">

然后你可以像这样选择这个类：

#mainNav.navbar--home{
  background:transparent;
}

【讨论】：

【解决方案4】：

使用主页正文类，例如：“.home / .home-index / .index-page”作为“.nav.fixed-top”容器的父级。

CSS::

.home .nav.fixed-top{
   background:rgba(0, 0, 0, 0) none repeat scroll 0 0;
}

【讨论】：