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

【问题标题】：Knockout/cutout text effect with grandparent带有祖父母的敲除/剪切文本效果
【发布时间】：2021-08-05 16:35:27
【问题描述】：

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

:grandparent 只是我尝试做的一个例子

这是我的 html 和 css：

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

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

【问题讨论】：

不确定选择祖父母背景颜色是什么意思。 There is no CSS parent selector

标签： html css inheritance mix-blend-mode

【解决方案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>

【讨论】：

我忘了说，我正在尝试在文本周围添加白色背景，但保持正文图像相同且文本透明，以便我们可以通过白色看到文本。例如，您的示例中的 .grandparent 是图像，.container 是白色，文本是透明的，所以文本颜色实际上是祖父母图像的一部分。