为什么我的 -webkit-background-clip 不能处理文本

Question

我之前在这台 PC 上使用过背景剪辑，它正在使用最新版本的 Chrome，我在这里制作了一个代码笔，以便人们可以看到出了什么问题

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>

社会保障：

.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 和另一台 PC 上尝试过，但它仍然无法正常工作，所以我已经排除了它是否是浏览器。我完全从我的另一支笔中复制了代码，所以我不知道为什么它不起作用

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>