如何使用 CSS 通过此 HTML 布局创建挖空（透明）文本？

Question

我正在尝试创建一个布局，其中一些字母是透明的，后面有白色背景，但透明度一直显示到 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 有关如何执行此操作的技巧文章：

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

但我的问题似乎是我希望文本透明并通过白色背景一直显示到 HTML 层次结构上三层的 .header 元素。

仅 CSS 就可以做到这一点吗？如果可以，怎么做？我已经尝试了我能想到的一切都无济于事。谢谢。

编辑：值得一提的是 CSS 技巧文章使用了 -webkit-background-clip: text; 属性，但是当我将其添加到我的 CSS，它不会改变任何东西，当您在浏览器中检查相应的元素时，它会被划掉。换句话说，我认为它不再受支持并且实际上不再做任何事情（我可能是错的）。

Answer 1

你可以看看mix-blend-mode :

.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
}

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

如何使用 CSS 通过此 HTML 布局创建挖空（透明）文本？

How can I use CSS to create knockout (transparent) text with this HTML layout?

html

css

text

transparent

linear-gradients