Question

我希望我的导航是透明的，但不是固定的。当它没有被修复时，它会推动它下面的所有内容，这意味着导航的BG然后是白色的。所以，它看起来不再透明。我需要一个非固定导航，与固定顶部具有相同的效果，这意味着它不会推动内容 - 但不是固定的。

示例如下，如果您将“固定顶部”添加到导航中，您将看到我的意思。

.navbar {
	background-color: rgba(225,225,225, 0.4) !important;
	border-color:transparent;
	background-image:none;
	box-shadow:none;	
}
.jumbotron.massage {
background: url(https://mave.me/img/projects/full_placeholder.png) no-repeat center center;		
background-size: cover;
background-color: rgba(68, 68, 68, 0.6);
height: 100vh;
width: 100%;	
color: white;
position: relative;
padding-top: 10rem;
overflow: hidden;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}


.jumbotron {
background: url(https://mave.me/img/projects/full_placeholder.png) no-repeat center center;		
background-size: cover;
background-blend-mode: darken;
background-color: rgba(68, 68, 68, 0.6);
height: 100vh;
width: 100%;	
color: white;
position: relative;
overflow: hidden;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}

.jumbotron:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.3);

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet">
        
        

<nav class="navbar navbar-expand-lg navbar-light p-2">
  <img class="navbar-brand" style="max-width: 325px; max-height: 200px;" src="img/centred3.svg">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Treatments
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Gift Cards</a>
      </li>            
    </ul>
      <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Book Online</button>
  </div>
</nav>


        <div class="jumbotron massage">
            <div class="container">
             <div class="row d-flex justify-content-center">
                    <div class="col-sm-10 text-center content">
                        <h1 class="mb-4">Service Therapy for only £32</h1>
                        <p class="mb-4">Whether your Place holder placeholder placeholder</p>
                        <a href="" class="btn btn-primary btn-lg mt-4 animated slideInLeft">Reserve your Appointment</a>
                        <p class="arrow up"></p>
                       </div>
                    </div>
                </div>
            </div><p style="margin-bottom:800px;"></p>

Answer 1

nav{    
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 99999;
}

这应该有用。

透明导航仅适用于固定顶部

1 个答案: