html - 带有祖父母的敲除/剪切文本效果

Question

有没有办法使用混合模式与祖父母而不是父母来做淘汰文本效果？

• :grandparent 只是我想要做的一个例子

这是我的html和css：

<span class="screen">lorem</span>

.screen {
    color: black;
    mix-blend-mode: screen;
    background-color: inherit:grandparent;
  }

标签： htmlcssinheritancemix-blend-mode

Answer 1

mix-blend-mode:multiply;是你的朋友。为了获得祖父母的背景颜色，你能做的最好的就是继承它。

.screen {
  color:white;
  background-color:black;
  mix-blend-mode:multiply;
  font-size:50px;
}
.container{
  background:inherit;
}
.grandparent {
  background: linear-gradient(90deg, red, green);
  width:fit-content;
}

<div class="grandparent">
<div class="container">
  <span class="screen">lorem</span>
</div>
</div>