为什么我的 -webkit-background-clip 在文本上不起作用？

Question

我曾在这台电脑上使用过背景剪裁，并且它在最新版本的Chrome上运行正常，我在这里创建了一个CodePen，以便人们可以看到出了什么问题。

HTML:

        <div class="coinOutputs">
    <h2 class="coinOutputs--white">If text is <span class="coinOutputs--green">green</span> then you have enough of that coin to deposit it in a bank</h2>
      <h2 class="text coinOutputs--white">Coppers:</h2>

SCSS：

.coinOutputs{
&--green{
    background: linear-gradient(to bottom right, darken(green,15) , lighten(green,15));
}
&--white{
    background: linear-gradient(to bottom right, darken(white , 15), white);
}
-webkit-background-clip: text;
color: transparent;

我在Firefox和另一台电脑上都尝试过了，但仍无法工作，因此我排除了浏览器的问题。我将代码从我的另一个笔记本中完全复制过来，所以不知道为什么它不能工作。

- InfiniteCookie

Answer 1

因为-webkit-background-clip: text;必须应用于文本元素而不是其父元素。

.coinOutputs span {
  -webkit-background-clip: text;
  color: transparent;
}

.coinOutputs--green {
  background: linear-gradient(to bottom right, #003400, #00cd00);
}

.coinOutputs--white {
  background: linear-gradient(to bottom right, #d9d9d9, white);
}

<div class="coinOutputs">
  <h2 class="coinOutputs--white">If text is <span class="coinOutputs--green">green</span> then you have enough of that coin to deposit it in a bank</h2>
  <h2 class="text coinOutputs--white">Coppers:</h2>

- Paulie_D

---

非常感谢，我刚刚自己发现了这个问题 - 如果您不介意的话，为什么会这样呢？因为如果有人稍后查看此帖子，他们可能想知道确切的原因。 - InfiniteCookie