CSS-继承祖父母Div的颜色的透明文本

Question

我正在制作个人网站。我想添加一些有趣的东西，让人们写信给我的“墙”。这个想法是要有一个是线性梯度的祖父母div，是黑色的父级，与祖父母div匹配的文字（梯度的一部分将在文本下。我知道我可以给文本相同 但理想地像文本一样，看起来像是黑色div中的一个孔。

渐变为背景， https://i.sstatic.net/0ixos.png” alt =“ note text”>

到目前为止，这是我的CSS

.black {
  overflow: hidden;
  height: 88vh;
  width: 98vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000000;
  /* border-width: 2vh;
  border-style: solid;
  border-image: var(--gradient) 1; */
 }

 .gradient {
  overflow: hidden;
  height: 92vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: var(--gradient);
 }

 .wallText {
  font-weight: 800;
  font-size: 4vh;
  justify-content: space-between;
  color: transparent;
 }

：

 return (
    <div className='grad'>
      <div className="black">
      <p className="wallText">WALL</p>
      </div>
    </div>
  )

=“ nofollow noreferrer”>

Answer 1

查看CSS-tricks中的淘汰文字的帖子
在下面使用它是类似于您的片段。

.gradient {
  overflow: hidden;
  height: 92vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to right, red, red 5%, #fff);
 }
.wall {
  overflow: hidden;
  height: 88vh;
  width: 98vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000000;
  color: transparent;
  
  color: white;
  mix-blend-mode: multiply;
 }

<div class='gradient'>
    <p class="wall">Wall Text</p>
</div>