Html 祖父母的淘汰/剪切文本效果

有没有一种方法可以使用祖父母而不是父母的混合模式来实现击倒文本效果

• 爷爷奶奶只是我正在努力做的一个例子

以下是我的html和css：

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

---

混合模式：乘法是你的朋友。要获得祖父母的背景色，最好是继承它


屏幕{
颜色：白色；
背景色：黑色；
混合模式：倍增；
字体大小：50px；
}
.集装箱{
背景：继承；
}
.祖父母{
背景：线性梯度（90度，红色，绿色）；
宽度：适合的内容；
}

洛勒姆
不确定选择祖父母背景色是什么意思。我忘了提到，我试图在文本周围添加白色背景，但保持主体图像不变，文本透明，这样我们就可以通过白色看到文本。例如，示例中的.祖父母是图像，.container是白色的，文本是透明的，因此文本颜色实际上是祖父母图像的一部分。
.screen {
    color: black;
    mix-blend-mode: screen;
    background-color: inherit:grandparent;
  }