Question

我不确定如何表达这个问题，但我会尽力的。因此，我尝试在背景图片的顶部覆盖图片，标题本身占用了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;
}

谢谢您的任何帮助。

Answer 1

只需尝试相对于标头本身施加位置:)通常，如果您使用绝对位置，则包含该位置的主要元素应为相对位置。这是使绝对元素位于其父对象的宽度和高度的100％且不浮于参考的情况下的正确方法。

覆盖层不覆盖整个标题

1 个答案: