将 alpha 通道添加到在 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

使用新的color-mix函数，这是可能的：

:root {
--blue: #0000ff;
}
.blue-with-alpha {
background-color: color-mix(in srgb, var(--blue), transparent 66%);
}

<p class="blue-with-alpha">Some content</p>

在项目中使用它之前，请检查浏览器支持。

有关更多详细信息，您可以查看本文：https://una.im/color-mix-opacity/

Answer 2

对此有几种潜在的解决方案：

• 调整变量以使用 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);
}

Answer 3

从 Safari 16.4 开始，您可以使用相对颜色语法来实现它。但是Chrome 111和Firefox 111目前不支持这种语法。

.blue-with-alpha {
color: rgb(from var(--blue) r g b / 0.4)
}