Наложите прозрачную навигационную панель начальной загрузки 4 на изображение, используя flexbox - PullRequest
Новая
       20

Наложите прозрачную навигационную панель начальной загрузки 4 на изображение, используя flexbox

0 голосов
/ 14 апреля 2019

Мне нужно поместить прозрачную загрузочную панель 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 Ответ

0 голосов
/ 14 апреля 2019

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

.navbar{
   position:absolute;
}
...