html - 剪辑路径上的文本

Question

This is my cover page

我需要的是白色字母流过剪辑路径 我已经尝试过 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