Halten Sie das Overlay-Bild innerhalb der Bildgrenzen – beschränken Sie es so, dass es nur am Bild haftet

Question

Ich versuche, ein Overlay über ein Bild zu legen, aber dieses Overlay erstreckt sich bis zur oberen Menüleiste und ich weiß nicht, wie ich es einfach in das Bild einfügen soll.

Ich habe verschiedene Möglichkeiten ausprobiert, die Größe des Bildes zu ändern und die Position zu ändern, aber es erstreckt sich immer noch über die Menüleiste. Es ist eine kleine Lösung für den Vollbildmodus, wenn ich die obere Position anpasse, aber auf Mobilgeräten funktioniert es nicht, da das Menü ausgeblendet ist. Und wenn sich die Größe ändert, fließt es unter das Bild.

header {
  border-bottom: 5px solid coral;
  font-family: Arial;
}

header a {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

.bg-image {
  background-image: url('https://images.pexels.com/photos/1647120/pexels-photo-1647120.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
  background-size: cover;
  background-position: center;
  background-color: blue;
  background-repeat: no-repeat;
}

.vh-80 {
  min-height: 80vh;
}

.banner-text {
  color: white;
  font-size: 3rem;
  text-align: center;
  font-family: Arial;
}

.bg-overlay>* {
  position: relative;
}

.bg-overlay::before {
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

<header class="grid-spaceBetween-middle ">
  <div class="col-2 ">
    <a href="/index.html" class="logo">
      <p>Logo</p>
    </a>
  </div>
  <nav class="col-10">
    <a href="/#.html">About Us</a>
    <a href="/#.html"></a>
    <a href="/#.html">Business Travel</a>
    <a href="/#.html">Be Inspired</a>
    <a href="/#.html">Contact</a>
  </nav>
</header>

<!-- 图像横幅 -->

<section class="grid-spaceAround vh-80 bg-image bg-overlay">
  <div class="col-12-middle banner-text">
    <p>IT'S ALL <strong>GOOD</strong></p>
  </div>
</section>

Ich habe versucht, Teile auszutauschen, ich habe die Methode der relativen Position ausprobiert, aber nichts hat funktioniert.

Answer 1

在 .bg-image 上添加 position: relative，而不是在覆盖层 .bg-overlay > * 的每个元素上添加。

header {
  border-bottom: 5px solid coral;
  font-family: Arial;
}

header a {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

.bg-image {
  background-image: url('https://images.pexels.com/photos/1647120/pexels-photo-1647120.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
  background-size: cover;
  background-position: center;
  background-color: blue;
  background-repeat: no-repeat;
  position: relative;
}

.vh-80 {
  min-height: 80vh;
}

.banner-text {
  color: white;
  font-size: 3rem;
  text-align: center;
  font-family: Arial;
}


.bg-overlay::before {
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

<header class="grid-spaceBetween-middle ">
  <div class="col-2 ">
    <a href="/index.html" class="logo">
      <p>Logo</p>
    </a>
  </div>
  <nav class="col-10">
    <a href="/#.html">About Us</a>
    <a href="/#.html"></a>
    <a href="/#.html">Business Travel</a>
    <a href="/#.html">Be Inspired</a>
    <a href="/#.html">Contact</a>
  </nav>
</header>

<!-- Image banner -->

<section class="grid-spaceAround vh-80 bg-image bg-overlay">
  <div class="col-12-middle banner-text">
    <p>IT'S ALL <strong>GOOD</strong></p>
  </div>
</section>