向 CSS 颜色变量添加不透明度答案

【问题标题】：Adding opacity to a CSS color variable向 CSS 颜色变量添加不透明度
【发布时间】：2020-11-19 09:56:15
【问题描述】：

我在尝试将 rgba 与 CSS 变量的不透明度设置一起使用时遇到了问题。颜色是一个动态的十六进制变量，在名为 --primaryColor 的变量中定义。

我只是想知道我是否做错了什么，或者是否有不同的方法来解决问题。这是代码。

:root {
    --primaryColor: #006CB4;
}

.section-title {
    border-bottom: 2px solid rgba(var(--primaryColor), 0.65);
}

如果我只是将 HEX 代码放在那里，它可以正常工作，但问题是主颜色变量是在应用程序的其他地方动态设置的，所以它必然会改变，因此，它必须保持变量而不是静态十六进制代码。

在上面的代码示例中，我只得到一个空白结果。不能以这种方式使用 CSS 变量还是我做错了什么？我真的很感激一些帮助。谢谢！

【问题讨论】：

这能回答你的问题吗？ How do I apply opacity to a CSS color variable?

标签： css sass colors css-variables

【解决方案1】：

您可以使用mask 进行模拟

:root {
  --primaryColor: #006CB4;
}

.section-title {
  border-bottom: 5px solid var(--primaryColor);
  /*                            your opacity here ---v     v--- same as border */
  -webkit-mask: linear-gradient(0deg, rgba(0, 0, 0, 0.65) 5px, #fff 0);
          mask: linear-gradient(0deg, rgba(0, 0, 0, 0.65) 5px, #fff 0);
}

&lt;h1 class="section-title"&gt;this is a title&lt;/h1&gt;

【讨论】：