在 header 元素上使用剪辑路径时，z 索引不适用于图像

Question

this is the screen shot of my problem.感谢这个社区给我机会解决我的问题，因为我在 header 部分遇到问题，我的统计图像没有出现在 header（剪辑路径）。我需要这个图像在剪辑路径之上。我搜索了很多但没有解决我的问题。请查看这段代码，我还附上了屏幕截图，让您更好地了解我在寻找什么。提前致谢

.header {
  background: linear-gradient(to right bottom, rgba($color-black, .85), rgba($color-black, .85)), url(../img/background.jpg);
  background-size: cover;
  background-position: center;
  height: 95vh;
  clip-path: polygon(0 0, 100% 0, 100% 15%, 60% 100%, 0 100%);
  z-index: -10;
  &__navigation {
    background-color: $color-secondary;
  }
  &__flex {
    display: flex;
    align-items: flex-end;
  }
  &__textbox {
    flex: 0 0 50%;
    padding: 20vh 5vw 0 0;
    &--text {
      font-size: 1.6rem;
      margin-bottom: 4rem;
      color: $color-light;
    }
  }
  &__photo {
    flex: 1;
    z-index: 10;
    &--img {
      display: block;
      z-index: 10;
    }
  }
}

<!-- ================================= Header starts here ===========================-->
<header class="header" id="header">
  <div class="header__navigation">
    <div class="row">
      <!-- ============= Navigation starts =============-->
      <nav class="nav">
        <a href="#home" class="logo">Olivlian</a>
        <ul class="nav__list js--nav__list">
          <li class="nav__item">
            <a href="#home" class="nav__link">Home</a>
          </li>
          <li class="nav__item">
            <a href="#watch" class="nav__link">About</a>
          </li>
          <li class="nav__item">
            <a href="#feature" class="nav__link">Manufacturing</a>
          </li>
          <li class="nav__item">
            <a href="#product" class="nav__link">Packaging</a>
          </li>
          <li class="nav__item">
            <a href="#testimonial" class="nav__link">Forms</a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__link btn btn__primary">Buy Now</a>
          </li>
        </ul>
        <a href="#" class="icon__menu"><i class="fas fa-bars js--menu"></i></a>
      </nav>
      <!-- ============= Navigation Ends =============-->
    </div>
  </div>
  <div class="row">
    <div class="header__flex">
      <div class="header__textbox header__textbox--1">
        <h1 class="heading-primary">
          a vegan diet
        </h1>
        <p class="header__textbox--text">
          Olive oil is a liquid fat obtained from olives, a traditional tree crop of the Mediterranian Basin, produced by pressing whole olives and extracting the oil. It is commonly used in cooking, for frying foods or as a salad dressing.
        </p>
        <a href="#" class="btn btn__primary">add to cart</a>
        <a href="#" class="btn btn__light">book a table</a>
      </div>
      <div class="header__photo">
        <img src="img/6.jpg" alt="statistics" class="header__photo--img">
      </div>
    </div>
  </div>
</header>

Answer 1

感谢您的澄清。

您不需要剪裁实际的 header 元素，因为那样会剪裁其中的所有内容。

相反，您可以将一个 before 伪元素添加到具有背景的 header 并剪辑它。然后 header 的所有 children 都将保持未剪裁状态，以便显示您的统计图像。

这里有一个简化的片段来展示这个想法：

/*================================== Header Starts Here =====================================*/

.header {
  position: relative;
  height: 95vh;
  width: 100vw;
}

.header::before {
  content: '';
  background-image: linear-gradient(rgba(0, 0, 0, .85), rgba(0, 0, 0, .85)), url(https://picsum.photos/id/1016/300/200);
  background-size: cover;
  background-position: center;
  height: 95vh;
  width: 100vw;
  clip-path: polygon(0 0, 100% 0, 100% 15%, 60% 100%, 0 100%);
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
}

header__navigation {
  background-color: pink;
}

.header__flex {
  display: flex;
  align-items: flex-end;
}

.header__textbox {
  flex: 0 0 50%;
  padding: 20vh 5vw 0 0;
}

.header__textbox--text {
  font-size: 1.6rem;
  margin-bottom: 4rem;
  color: lightblue;
}

.header__photo {
  flex: 1;
  z-index: 10;
}

.header__photo--img {
  display: block;
  z-index: 10;
}

<!-- ================================= Header starts here ===========================-->
<header class="header" id="header">
  <div class="header__navigation">
    <div class="row">
      <!-- ============= Navigation starts =============-->
      <nav class="nav">
        <a href="#home" class="logo">Olivlian</a>
        <ul class="nav__list js--nav__list">
          <li class="nav__item">
            <a href="#home" class="nav__link">Home</a>
          </li>
          <li class="nav__item">
            <a href="#watch" class="nav__link">About</a>
          </li>
          <li class="nav__item">
            <a href="#feature" class="nav__link">Manufacturing</a>
          </li>
          <li class="nav__item">
            <a href="#product" class="nav__link">Packaging</a>
          </li>
          <li class="nav__item">
            <a href="#testimonial" class="nav__link">Forms</a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__link btn btn__primary">Buy Now</a>
          </li>
        </ul>
        <a href="#" class="icon__menu"><i class="fas fa-bars js--menu"></i></a>
      </nav>
      <!-- ============= Navigation Ends =============-->
    </div>
  </div>
  <div class="row">
    <div class="header__flex">
      <div class="header__textbox header__textbox--1">
        <h1 class="heading-primary">
          a vegan diet
        </h1>
        <p class="header__textbox--text">
          Olive oil is a liquid fat obtained from olives, a traditional tree crop of the Mediterranian Basin, produced by pressing whole olives and extracting the oil. It is commonly used in cooking, for frying foods or as a salad dressing.
        </p>
        <a href="#" class="btn btn__primary">add to cart</a>
        <a href="#" class="btn btn__light">book a table</a>
      </div>
      <div class="header__photo">
        <img src="https://picsum.photos/id/1015/300/300" alt="statistics" class="header__photo--img">
      </div>
    </div>
  </div>
</header>

在 header 元素上使用剪辑路径时，z 索引不适用于图像

z index is not working on image while using clip path on header element

css

image

header

z-index

clip-path