Question

我需要的是白色字母在剪辑路径上流动我已经尝试过z-index，但这没用

这是我的代码：

.header {
    height: 85vh;
    background-image: linear-gradient(
        to right bottom,
        rgba(255,255,255, 0.8),
        rgba(0,0,0, 0.8)),
    url(../../img/hero.jpg);
    background-size: cover;
    background-position: top;
    position: relative;

    clip-path: polygon(100% 100%, 100% 0, 65% 100%, 63% 100%, 100% 0, 99% 0, 100% 0, 13% 100%, 11% 100%, 100% 0, 0 81%, 0 77%, 100% 0, 0 45%, 0 43%, 100% 0, 0 0, 0 0, 0 100%);

<header class="header">
    <div class="header__logo-box">
        <img src="img/logo-white.png" alt="Logo" class="header__logo">
    </div>

    <div class="header__text-box">
        <h1 class="heading-primary">
            <span class="heading-primary--main">My Blog</span>
            <span class="heading-primary--sub">Enrique Cena</span>
        </h1>

        <a href="#section-tours" class="btn btn--white btn--animated">About me</a>
    </div>

Answer 1

也许您可以通过以下方式做些事情：

.header {
   position: relative;
   height: 85vh;
   width: 100%;
}

.header::before {
   z-index: -1;
   content: '';
   top: 0;
   left: 0;
   position: absolute;
   height: 100%;
   width: 100%;
   background-color: cyan;
   background-size: cover;
   background-position: top;
   clip-path: polygon(100% 100%, 100% 0, 65% 100%, 63% 100%, 100% 0, 99% 0, 100% 0, 13% 100%, 11% 100%, 100% 0, 0 81%, 0 77%, 100% 0, 0 45%, 0 43%, 100% 0, 0 0, 0 0, 0 100%);
 }

请将background-color更改为您的background-image

Answer 2

这是我的解决方案：我将h1从文本框中取出，并将文本和标头都包装在div中。这个div .wrap和header一样高。我将h1相对于此div定位。我希望这会有所帮助。

.header {
  height: 85vh;
  background-image: linear-gradient(
      to right bottom,
      rgba(0, 180, 180, 0.8),
      rgba(0, 0, 255, 0.8)
    ),
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/featured-space-policy.jpg);
  background-size: cover;
  background-position: top;
  position: relative;

  clip-path: polygon(
    100% 100%,
    100% 0,
    65% 100%,
    63% 100%,
    100% 0,
    99% 0,
    100% 0,
    13% 100%,
    11% 100%,
    100% 0,
    0 81%,
    0 77%,
    100% 0,
    0 45%,
    0 43%,
    100% 0,
    0 0,
    0 0,
    0 100%
  );
}

.wrap {
  position: relative;
  height: auto;
}
h1 {
  position: absolute;
  display: block;
  width: 100%;
  height: 1em;
  margin: auto;
  text-align: center;
  top: 0;
  bottom: 0;
}

<div class="wrap">
<header class="header">
    <div class="header__logo-box">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#blackcat" alt="Logo" class="header__logo">
    </div>

<div class="header__text-box">
       

        <a href="#section-tours" class="btn btn--white btn--animated">About me</a>
    </div>
</header>

   <h1 class="heading-primary">
            <span class="heading-primary--main">My Blog</span>
            <span class="heading-primary--sub">Enrique Cena</span>
        </h1>
  
</div>

剪辑路径上的文字

2 个答案: