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>

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

1 个答案: