Question

我的BS3页面中有一个导航栏，我希望.navbar-collapse显示transparent以使用我的渐变。在移动设备上，我希望.navbar-header拥有background-color #XXXXXX。我尝试了通常的background-color: transparent，但这似乎不起作用。到目前为止，这是我的所有代码。

$(function () {
  $(".navbar-toggle").click(function () {
    $(this).css("backgroundColor", "transparent");
  });
});

body {
  font-family: "Titillium Web", Montserrat, "Segoe UI", sans-serif;
  font-weight: 100;
  font-size: initial;
}

.kn-hydrogen {
  position: absolute;
  top: 0; right: 0; left: 0; bottom: 50%;
  background: #badecb; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, #badecb); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, #badecb, #9ba970); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, #badecb, #9ba970); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, #badecb, #9ba970); /* Standard syntax */
}

/*BS3*/

.navbar-header .navbar-toggle {
  border: none;
  border-radius: none;
}

.navbar-header .navbar-toggle:hover {
  background-color: transparent;
}

.navbar-header {
  background-color: transparent;
}

.navbar-header .navbar-brand {
  border-radius: 50%;
  background-color: #88ddb3;
}
.navbar-header .navbar-brand:hover {background-color: #88ddb3;}

.navbar-collapse {border-top:none;}

<div class="kn-hydrogen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
      <nav role="navigation" class="navbar-default">
        <div class="navbar-header">
          <button data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand">Kn</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href=#>Log In</a></li>
            <li><a href=# class="kn-tennesium">Help</a></li>
          </ul>
        </div>
      </nav>
    </div>

重温一下，

如何让.navbar-collapse在桌面上透明？
如何让.navbar-header在移动设备上使用#XXXXXX颜色？

BS3 Navbar中的透明度

0 个答案: