Наложение не покрывает весь заголовок - PullRequest
Новая
       26

Наложение не покрывает весь заголовок

0 голосов
/ 08 февраля 2019

Я не совсем уверен, как сформулировать этот вопрос, но я попробую.Итак, я пытаюсь получить оверлей поверх фонового изображения, сам заголовок занимает 100vh, но когда я размещаю оверлей с включенным изображением, некоторые отступы от навигационной панели отталкивают цвет фона нижеВьюпорт кажется.Я попытался убрать маржу с элементов навигации, и это немного поднимает фон, но не полностью.Может быть, я упускаю что-то очень простое здесь, но я просто не могу разобраться с этим.

Вот ссылка на кодовый блок (я знаю, что код немного беспорядок, это простотест): https://codepen.io/Jmp93/pen/BMJwov

<nav id="main-nav">
    <h3>TEST|Web</h3>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <header>
    <h1>Test Text Sample</h1>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt dolores, dolorum minima id beatae aperiam saepe
      sapiente animi quas earum?</p>
  </header>

  <section id="start-section">
    <div class="container">
      <h1 class="m-heading">Some Text</h1>
      <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta possimus dolore temporibus aut,
        reiciendis voluptatum voluptate consequatur ducimus. Sunt minus nihil nulla in commodi. In officiis, harum amet
        eos nesciunt illum rerum aliquam quasi modi natus quis laudantium qui quae?</p>
    </div>
  </section>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #333;
  color: #fff;
  margin: 0;
  line-height: 1.5;
}

.m-heading {
  font-size: 2rem;
  margin-bottom: .75rem;
}

.lead {
  font-size: 1.2rem;
}

header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  height: 100vh;
  text-align: center;
}

header:before {
  content: '';
  background: url('https://source.unsplash.com/1600x900/?nature,water') no-repeat center center/cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  z-index: -1;
}

header h1 {
  font-size: 4rem;
  margin: 1rem;
}

#main-nav {
  display: flex;
  position: sticky;
  top: 0;
  left: 0;
  justify-content: space-between;
}

#main-nav h3 {
  font-size: 2rem;
  margin: 2rem;
}

#main-nav ul {
  display: flex;
  justify-items: center;
  font-size: 1.2rem;
  margin: 2rem;
}

#main-nav ul li {
  list-style: none;
}

#main-nav ul li a {
  color: #fff;
  text-decoration: none;
  padding: 1rem;
}

#main-nav ul li a:hover {
  background: #444;
  border-radius: 25px;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem;
}

#start-section {
  background: #fff;
  color: #000;
  text-align: center;
}

Любая помощь будет оценена, спасибо.

1 Ответ

0 голосов
/ 08 февраля 2019

Просто попробуйте применить позицию относительно самого заголовка :) обычно, если вы используете абсолютную позицию, основной элемент, содержащий ее, должен быть относительным.Это правильный способ сделать абсолютный элемент позиционированным на 100% ширины и высоты его родителя и не плавать без ссылки.

...