使用 flexbox 在图像上覆盖 bootstrap 4 透明导航栏

Question

我需要使用 flexbox 在全屏图像上放置一个透明的 bootstrap 4 导航栏。我需要能够扩展轮播容器 (swiper.js) 以填充视口。

我已经设法展开旋转木马容器以填充视口，但导航栏没有透明地显示在它上面。要查看它当前的功能 [单击此处][1]。查看我想要实现的目标[单击此处][2]

        <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

Answer 1

要使您的图像与导航栏重叠，您只需给导航栏 position:absolute 属性 .

.navbar{
   position:absolute;
}

使用 flexbox 在图像上覆盖 bootstrap 4 透明导航栏

Overlay a bootstrap 4 transparent navbar over an image using flexbox

overlay

navbar

flexbox

bootstrap-4