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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (183)

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

我已设法扩展轮播容器以填充视窗,但导航栏不会透明地显示在它上面。

        <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
提问于
用户回答回答于

要使图像与导航栏重叠,只需将position:absolute属性赋予导航栏。

.navbar{
   position:absolute;
}

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励