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);
}

Answer 2

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

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

Answer 3

您的问题真的很有趣。这里是此问题的简单解决方案。基本上我们的十六进制颜色以前是6位或3位，后跟＃。因此，只需要在颜色代码的末尾添加两个额外的Alpha值即可。

例如，颜色红色=＃f00，并添加透明度＃f007。这里的7代表十六进制格式的透明度。

.box {
height:300px;
width:300px;
background-color:red;
}
.blue {
height:300px;
width:300px;
background-color:#0000ff77;
}

<html>
<div class="box">
	<div class="blue">
	</div>
</div>
</html>

希望有帮助。对不起，英语不好。