添加alpha通道到css变量上声明的十六进制颜色

2ledvvac  于 2023-04-08  发布在  其他
关注(0)|答案(4)|浏览(148)

就像标题说的,我想以某种方式为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 */
}
epggiuax

epggiuax1#

对此有几种可能的解决方案:
·调整变量以使用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);
}
ndasle7k

ndasle7k2#

在2021年,alpha值可以包含在十六进制颜色中。

:root {
  --blue: #0000ff;
  --blue-with-alpha: #0000ff66;
}
 
.blue-with-alpha{
  color: var(--blue-with-alpha);
}

This works in all modern browsers.

9gm1akwq

9gm1akwq3#

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

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

ogq8wdun4#

使用新的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>

在项目中使用browser support之前,请先检查它。
有关更多详细信息,您可以查看这篇文章:https://una.im/color-mix-opacity/

相关问题