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

Question

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

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和另一台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>