如何使用CSS使用此HTML布局创建模板透明文本？

问题描述

我正在尝试创建一种布局，其中某些字母是透明的，后面带有白色背景，但是透明性一直显示到渐变背景，直到HTML层次结构的多个层次。基本上，我正在尝试实现以下目标：

这是我当前的HTML和CSS：

.header {
  background-image: linear-gradient(135deg,#2121CC,#1E0674);
}

.header>div {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: auto;
  max-width: 100rem;
  padding: 1rem 2rem;
}

.header>div>h1 {
  display: flex;
}

.header>div>h1>span {
  background: #FFF;
  color: transparent;
  display: block;
  margin-right: 1rem;
  -webkit-text-fill-color: transparent;
}

<div class="header">
  <div>
    <h1>
      <span>A</span>
      <span>B</span>
    </h1>
  </div>
</div>

我正在参考以下CSS Tricks文章，了解如何执行此操作：

https://css-tricks.com/how-to-do-knockout-text/

但是对于我而言，问题似乎是我希望文本透明并从白色背景一直显示到HTML层次结构的三个层次的.header元素。

仅CSS可以做到吗？如果可以，怎么办？我尝试了所有我能想到的一切，但没有成功。谢谢。

编辑：值得一提的是，CSS Tricks文章使用了-webkit-background-clip: text;属性，但是当我将其添加到CSS中时，它没有任何改变，当您将其删除时检查浏览器中的相应元素。换句话说，我认为它不受支持，实际上已经做了任何事情（我可能错了）。

解决方法

您可以看看mix-blend-mode：

select t.*
from t
where (select count(*) from t where status = 'W') > 5;

.header {
  background-image: linear-gradient(135deg,red,#2121CC,#1E0674,yellow);
}

.header>div {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: auto;
  max-width: 100rem;
  padding: 1rem 2rem;
}

.header>div>h1 {
  display: flex;
}

.header>div>h1>span {
  background: #FFF;
  display: block;
  margin-right: 1rem;
  mix-blend-mode:screen
}

html linear-gradients transparent