bootstrap html
navbar
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!-- Navbar brand -->
<img class="logo" alt="Brand" src="images/1.png">
<a class="navbar-brand" href="Homepage.jsp">Car Surgeons Vehicle Service Centre</a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav" aria-controls="basicExampleNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="basicExampleNav">
<!-- Links -->
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="Homepage.jsp">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="AboutUs.jsp">About Us</a>
</li>
<li class="nav-item dropdown">
<a class=" nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Services
</a>
<div class="dropdown-menu dropdown-services" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item hvr-sweep-to-top" href="Services.jsp"> Car Wash</a>
<a class="dropdown-item hvr-sweep-to-top" href="Services.jsp"> Auto Detailing</a>
<a class="dropdown-item hvr-sweep-to-top" href="Services.jsp"> Lubrication Service</a>
<a class="dropdown-item hvr-sweep-to-top" href="Services.jsps"> Wheel Alignment</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="Login.jsp">Book Online</a>
</li>
<li class="nav-item vertical-line">
<a class="nav-link" href="Contact Us.jsp">Contact Us</a>
</li>
</ul>
<!-- Links -->
</div>
<!-- Collapsible content -->
</nav>
<!--/.Navbar-->
但我需要透明* 和固定到顶部
这是我的css
使它透明,但它永远不会透明,而是会产生一些色调。
这是我的css
.transparent-navbar{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE 5-7 */
-moz-opacity: 0.5; /* Netscape */
-khtml-opacity: 0.5; /* Safari 1.x */
opacity: 0.5;
box-shadow: 1px 5px black;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}
任何人都可以帮助我吗?
答案 0 :(得分:5)
Bootstrap 4附带bg-transparent
课程。将其应用于导航栏。
<div class="bg-primary">
<div class="navbar navbar-dark bg-transparent">
...
</div>
</div>