如題所示，我想給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 */
}

對此有幾種可能的解決方案:

調整您的變量以使用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);
}

有了新的混色功能，這就成為可能:

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

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

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

從Safari 16.4開始，可以用相對顏色語法來實現。但是Chrome 111和Firefox 111目前還不支持這種語法

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