如何将 alpha 值添加到 css 中的变量？

Posted 2023-03-06

【中文标题】如何将 alpha 值添加到 css 中的变量？

【英文标题】：How can I add alpha values to variables in css?

【发布时间】：2020-10-15 16:55:40

【问题描述】：

像这样。

color: var(--color-alt) + 80

因此，例如，如果我将#32a6a8 之类的颜色设置为 --color-alt 并且我还希望应用该颜色的透明度为 50%（50% 透明度的 alpha 代码为 80 - 这就是它的原因那里有var(--color-alt) + 80)。

该变量是必需的，因为这是一个有角度的应用程序，它需要使用透明度为 50% 的颜色动态设置颜色值。

那么有没有办法做到这一点是原生 css？

【问题讨论】：

相关：***.com/a/55330103/8620333

我可以使用十六进制颜色代码吗？

不，它不工作！

然后分享你的完整代码，可以通过 box-shadow 实现

不是您应用的完整代码。仅显示您的用例所需的代码。展示您如何使用 box-shadow 不需要您上传整个应用程序

【参考方案1】：

您可以使用其他颜色系统。赞这个color: rgba(var(--color), var(--alpha));

【讨论】：

或者有没有办法在css中将十六进制转换为rgba？

只能通过js转换颜色。或者你可以试试这种方式***.com/questions/10929458/…

十六进制颜色没有透明度的 alpha 通道，hsla() 或 rgba() 有。您需要使用其中之一。您想要做的使用的更多细节，可以打开其他选择。混合模式/不透明度？

@G-Cyrillus：十六进制颜色确实有一个 alpha 通道：#RRGGBBAA（或#RGBA）：CSS Tricks article: https://css-tricks.com/8-digit-hex-codes/。

@DavidsaysreinstateMonica 现在它实际上似乎比我想象的更受支持，但是，使用 var() 和 calc() 不兼容 :(