我该如何解决这个“无效的属性值”问题？ [关闭]答案

【问题标题】：How do I solve this "Invalid property value" problem? [closed]我该如何解决这个“无效的属性值”问题？ [关闭]
【发布时间】：2021-05-22 18:54:47
【问题描述】：

我为文本添加了渐变效果，这在 Firefox 上运行良好，但在 chrome 和我的手机（safari ios）上，渐变效果不起作用。检查元素为两个背景属性提供黄色标志（无效属性值）：线性渐变（左，#38d39f，#38a4d3）和背景剪辑：文本我用的是 SCSSenter image description here。

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

【问题讨论】：

它是to left 而不是left，您还需要-webkit-background-clip: text;

标签： css sass web-frontend

【解决方案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

【讨论】：