如何解决这个 "Invalid property value" 问题？

Question

我为文本添加了渐变效果，这在 firefox 上工作得很好，但在 chrome 和我的 phone (safari ios) 上，渐变效果不起作用。检查元素为两个背景属性提供黄色标志（无效属性值）：linear-gradient(left, #38d39f, #38a4d3) 和 background-clip: text 我使用 SCSSenter image description here.

  h2 {
    font-size: 8rem;
    padding-top: 2rem;
    background: $gradient;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
  }

Answer 1

没有 -webkit 前缀的 Chrome 尚不支持 background-clip 属性。

并且 linear-gradient() 边值应该有 to 关键字而不只是 left.

有了这些添加，它应该看起来像这样：

$gradient: linear-gradient(to left, #f542f5, #999);

h2 {
  font-size: 8rem;
  padding-top: 2rem;
  background: $gradient;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  display: inline-block;
}

参考：Can I Use - background clip, MDN - CSS gradients

如何解决这个 "Invalid property value" 问题？

How do I solve this "Invalid property value" problem?

css

sass

web-frontend