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透明导航栏

1 个答案: