Попытка центрировать lo go на полноэкранном фоновом изображении, но панель навигации толкает его вниз - PullRequest
Новая
       106

Попытка центрировать lo go на полноэкранном фоновом изображении, но панель навигации толкает его вниз

0 голосов
/ 09 июля 2020

Я немного новичок ie, так что это может быть что-то довольно прямолинейное. Я пытаюсь разместить lo go в центре целевой страницы с полным фоновым изображением. Однако моя навигационная панель продолжает опускать lo go.

Я считаю, что это потому, что оба элемента находятся в одном контейнере. Тем не менее, я попытался переместить навигацию из контейнера, но затем он сдвинул мое фоновое изображение вниз. Я пробовал поиграть с position, но это затем испортило мои свойства flex для lo go и значков навигации.

Любые советы / подсказки и краткие объяснения были бы очень полезны, спасибо.

Вот мой код ниже

Также код: https://codepen.io/LeccaUK/pen/GRodYMO

* {
  margin: 0;
  padding: 0;
}

.icon {
  width: 50px;
}

.logo {
  width: 250px;
}

.hero-container {
  background-image: url(https://images.wallpaperscraft.com/image/road_highway_asphalt_146464_1920x1080.jpg);
  background-position: center center;
  background-size: cover;
  height: 100vh;
}

nav {
  padding: 30px;
  display: flex;
  justify-content: space-between;
}

.hero-content {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="hero-container">
  <nav>
    <img src="https://image.flaticon.com/icons/svg/846/846551.svg" class="icon">
    <img src="https://image.flaticon.com/icons/svg/2099/2099153.svg" class="icon">
  </nav>
  <div class="hero-content">
    <img src="https://image.flaticon.com/icons/svg/3121/3121628.svg" class="logo">
  </div>
</div>

1 Ответ

1 голос
/ 09 июля 2020

Просто вставьте два div с css фоном img. Вот и все. 

      * {
         margin: 0;
         padding: 0;
      }
      .icon {
         width: 50px;
      }
      .logo {
         width: 250px;
      }
      .hero-container {
         background-image: url(https://images.wallpaperscraft.com/image/road_highway_asphalt_146464_1920x1080.jpg);
         background-size: cover;
         background-position: center center;
         height: 100vh;
      }
      nav {
         padding: 30px;
         display: flex;
         justify-content: space-between;
      }
      .hero-content {
         background-image: url(https://image.flaticon.com/icons/svg/3121/3121628.svg);
         height: 100vh;
         background-repeat: no-repeat;
         background-position: center center;
         background-size: 250px;
      }
   <div class="hero-container">
      <div class="hero-content">
         <nav>
            <img src="https://image.flaticon.com/icons/svg/846/846551.svg" class="icon">
            <img src="https://image.flaticon.com/icons/svg/2099/2099153.svg" class="icon">
         </nav>
      </div>
   </div>
...