css - 将 alpha channel 添加到在 css 变量上声明的十六进制颜色

Question

正如标题所说，我想以某种方式为 css 变量中定义的十六进制颜色添加透明度。我在其他帖子中看到过使用 rgb 的解决方案，但我需要十六进制。
也许使用 rgba()、calc() 或 linear-gradient()，但我的尝试没有达到任何结果。

有人可以帮忙吗？

我找不到任何相关帖子，因为我使用的是十六进制颜色和 css 变量

例如:

:root {
  --blue: #0000ff;
}
 
.blue-with-alpha {
  color: var(--blue)66; /* I am trying to achieve something like this */
}

Answer 1

有几种可能的解决方案:
• 调整您的变量以使用 rgb 值，以便您可以轻松地在 CSS 中添加 alpha:

:root {
   --blue: 0, 0, 255;
}

.blue-with-alpha{
   color: rgba(var(--blue), 0.44);
}

• 您还可以添加 alpha 作为变量:

:root {
   --blue: 0, 0, 255;
   --alpha: .44;
}

.blue-with-alpha{
   color: rgba(var(--blue), var(--alpha);
}

• 使用不透明度:

:root {
   --blue: #0000ff;
}

.blue-with-alpha {
   color: var(--blue);
   opacity: .44;    
}

• 为突出显示定义不同的变量:

:root {
   --blue: #0000ff;
   --blue-highlight: #0000ff66;
}

.blue-with-alpha{
   color: var(--blue-highlight);
}