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

Posted 2023-02-23

【中文标题】将 alpha 通道添加到 css 变量上声明的十六进制颜色

【英文标题】：Add alpha channel to hex color declared on css variable

【发布时间】：2019-02-01 21:40:34

【问题描述】：

正如标题所说，我想以某种方式为 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 */

【问题讨论】：

十六进制表示法不能在 CSS 中存储 alpha 通道信息。唯一支持这种功能的浏览器是早期的 Internet Explorer 版本，它使用一组四个十六进制数字，其中第一个存储 alpha 通道值。 （例如#99ffcccc）因此，无论哪种情况，都需要转换符号，或者您使用另一种方法来添加独立于颜色 alpha 通道的透明度；见：***.com/questions/1751263/…

@feeela，对不起，你错了。我在谷歌浏览器上使用符号#rrggbbaa，它工作正常

Chrome 68 将此报告为“无效的属性值”。可能您启用了隐藏在标志后面的某些功能：“从版本 52：此功能位于启用实验性 Web 平台功能首选项的后面。要更改 Chrome 中的首选项，请访问 chrome://flags。”另请参阅兼容性表：developer.mozilla.org/en-US/docs/Web/CSS/color 所以，这是一个相对较新的功能，浏览器支持不太好。

你可以这样使用background:rgba(0, 0, 0, 0.5);

与***.com/questions/7015302/css-hexadecimal-rgba不重复，因为我使用的是css变量

【参考方案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);

【参考方案2】：

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

:root 
  --blue: #0000ff;
  --blue-with-alpha: #0000ff66;

 
.blue-with-alpha
  color: var(--blue-with-alpha);

This works in all modern browsers.