（CSS）是否可以在线性渐变中继承RGB值？

我使用的是一个分级系统，用来显示令人敬畏的星形（和半星形）图标，我最近切换到耳机图标。Font awesome提供半星形图标，但不提供半耳机图标。因此，我不得不使用CSS只显示半个图标（完全不透明度），而另一半的不透明度较低。我就是这样做的：

background: linear-gradient(to right, rgb(206, 55, 72) 50%, rgba(206, 55, 72, 0.28) 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

示例（请参见下面的红色图标了解4.5耳机的等级）：

---

问题是，我在其他地方也使用相同的评级，因为字体颜色不同。但因为我定义了一个特定的RGB值，所以我的半头耳机在整个站点上使用相同的颜色

请查看：

---

我可以在使用线性渐变时“继承”颜色并且只影响图标的不透明度吗

例如：

background: linear-gradient(to right, inherit 50%, rgba(inherit, 0.28) 50%);

还是有其他办法

---

谢谢。

您可以使用CSS自定义属性（变量）来完成，但是您需要三个，而且会变得很混乱。

CurrentColor

可以用于第一站，但不能用于第二站…但是这可能很有用-@Paulie\u感谢您的链接，我之前看到过，但我希望有另一个选择，因为对于这样一个基本的需求来说，这个插件看起来有些过分了。但是这个插件看起来确实很棒。。。我必须在这段时间内检查一下。谢谢兄弟。我同意@Paulie_D的说法，这里最好的方法是CSS variabes