Conservez l'image de superposition dans les limites de l'image - limitez-la pour qu'elle ne colle qu'à l'image.

Question

J'essaie de mettre une superposition sur une image, mais cette superposition s'étend jusqu'à la barre de menu supérieure et je ne sais pas comment la coller simplement sur l'image.

J'ai essayé différentes manières de redimensionner l'image et de modifier la position, mais elle s'étend toujours sur la barre de menus. C'est un petit correctif pour le plein écran lorsque j'ajuste la position haute, mais une fois sur mobile cela ne fonctionnera pas puisque le menu est masqué. Et lorsque la taille change, elle coule sous l’image.

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>

J'ai essayé de changer de pièces, j'ai essayé la méthode de position relative, mais rien n'a fonctionné.

Answer 1

Ajoutez chaque élément de .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>