我需要把一个透明的bootstrap 4导航栏放在一个使用flexbox的全屏图像上。我需要能够扩展一个轮播容器(swiper.js)来填充视图端口。
我已经设法扩展了carousel容器以填充视图端口,但导航栏并不透明地显示在它上面。要查看它当前的功能,请单击此处。要查看我想要实现的目标,请单击此处
<nav class="navbar navbar-expand-md navbar-light bg-transparent">
<div class="navbar-brand pr-5">
<a class="d-inline-block" routerLink="/home">
<img src="assets/logo-dark.png" alt="" height="43">
</a>
</div>
<div class="navbar-collapse collapse navbars" id="navbar-navigation">
<div class="navbar-nav">
<a class="nav-item nav-link text-uppercase" href="#>Home</a>
<a class="nav-item nav-link text-uppercase" href="#>Service</a>
<a class="nav-item nav-link text-uppercase" href="#>Product</a>
</div>
</nav>
</div>
<div class="d-flex flex-fill">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide bg-cover" style="background-image:url('http://placehold.it/1920x1080');">
Slide 1</div>
<div class="swiper-slide bg-cover" style="background-image:url('http://placehold.it/1920x1080');">
Slide 2</div>
<div class="swiper-slide bg-cover" style="background-image:url('http://placehold.it/1920x1080');">
Slide 3</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
<main class="page-content content-boxed">
Page content goes here ...
</main>
[1]: https://i.stack.imgur.com/1eB42.png
[2]: https://i.stack.imgur.com/2fr9H.png
https://stackoverflow.com/questions/55676742
复制相似问题