Блог

Главная - Вопросы по программированию - Наложение прозрачной панели навигации bootstrap 4 на изображение с помощью flexbox

Наложение прозрачной панели навигации bootstrap 4 на изображение с помощью flexbox

#flexbox #bootstrap-4 #navbar #overlay

#flexbox #bootstrap-4 #панель навигации #наложение

Вопрос:

Мне нужно разместить прозрачную панель навигации bootstrap 4 поверх полноэкранного изображения с использованием flexbox. Мне нужно иметь возможность расширять контейнер карусели (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

Ответ №1:

Чтобы изображение перекрывало панель навигации, вам просто нужно присвоить панели навигации свойство position:absolute.

 .navbar{
   position:absolute;
}
Метки: