如何将不透明度应用于CSS颜色变量?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (26)

我正在设计一个电子应用程序,所以我可以访问CSS变量。我定义了一个颜色变量。vars.css:

:root {
  --color: #f0f0f0;
}

我想在一些不透明的情况下用这个颜色main.css

#element {
  background: (somehow use var(--color) at some opacity);
}

我该怎么做呢?我不使用任何预处理程序,只使用CSS。我想要一个全CSS的答案,但我会接受JavaScript/jQuery。

我不能用opacity因为我使用的背景图像不应该是透明的。

提问于
用户回答回答于

你不能接受现有的颜色值并将alpha通道应用到它。也就是说,不能使用现有的十六进制值,例如#f0f0f0,给它一个alpha组件,并将结果值与另一个属性一起使用。

但是,自定义属性允许你将十六进制值转换为rgb三元组,以便与rgba(),将该值存储在自定义属性(包括逗号!)中,使用var()变成rgba()函数具有所需的alpha值,它将只起作用:

:root {
  /* #f0f0f0 in decimal RGB */
  --color: 240, 240, 240;
}

body {
  color: #000;
  background-color: #000;
}

#element {
  background-color: rgba(var(--color), 0.5);
}
<p id="element">If you can see this, your browser supports custom properties.</p>

在这里自定义属性的值被替换了。原样更换时var()属性值中的引用,以前该属性的值是计算出来的。这意味着,就自定义属性而言,--color在你的示例中根本不是一个颜色值,直到一个var(--color)表达式出现在某个需要颜色值的地方(仅在该上下文中)。

这意味着240, 240, 240值直接替换到rgba()功能以前声明是计算出来的。所以这个:

#element {
  background-color: rgba(var(--color), 0.5);
}

这在一开始似乎不是有效的CSS,因为rgba()期望不少于四个逗号分隔的数值,变成如下:

#element {
  background-color: rgba(240, 240, 240, 0.5);
}

当然,这是完全有效的CSS。

更进一步,你可以将alpha组件存储在它自己的自定义属性中:

:root {
  --color: 240, 240, 240;
  --alpha: 0.5;
}

代之以同样的结果:

#element {
  background-color: rgba(var(--color), var(--alpha));
}

这允许你有不同的阿尔法值,你可以在空中交换。


如果你在不支持自定义属性的浏览器中运行代码段,则是这样的。

用户回答回答于

rgba()/ hsla()是本机css函数,因此可以使用字符串插值来绕过scss函数。

示例(在Sass 3.5.0+中有效):

:root {
    --color_rgb: 250, 250, 250;
    --color_hsl: 250, 50%, 50%;
}

div {
    /* This is valid CSS, but will fail in a scss compilation */
    background-color: rgba(var(--color_rgb), 0.5);
    
    /* This is valid scss, and will generate the CSS above */
    background-color: #{'rgba(var(--color_rgb), 0.5)'};
}
<div></div>

请注意,字符串内插将不适用于非css scss函数,例如lighten(),因为生成的代码将不是功能CSS。虽然它仍然是有效的SCSS,所以在编译过程中不会收到任何错误。

扫码关注云+社区

领取腾讯云代金券