如何对CSS颜色变量应用不透明度？

Question

我正在电子中设计一个应用程序，因此我可以访问CSS变量。我在vars.css中定义了一个颜色变量：

:root {
  --color: #f0f0f0;
}

我想在main.css中使用这种颜色，但应用了一些不透明度：

css prettyprint-override">#element {
  background: (somehow use var(--color) at some opacity);
}

我该如何着手做这件事？我没有使用任何预处理器，只有CSS。我更喜欢全CSS的答案，但我会接受JavaScript/jQuery。

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

Answer 1

我也处于类似的情况，但不幸的是，给定的解决方案对我不起作用，因为变量可以是从rgb到hsl到hex甚至颜色名称的任何内容。
我现在解决了这个问题，通过将backed-Color和不透明度应用于伪：在之后或：之前元素：

.container {
    position: relative;
}

.container::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    background-color: var(--color);
    opacity: 0.3;
}

样式可能需要稍微改变，这取决于背景应该应用到的元素。< br >此外，它可能并不适用于所有情况，但希望它在其他解决方案无法使用的情况下有所帮助。

编辑:我刚刚注意到，这个解决方案显然也会影响文本颜色，因为它在目标元素前面创建了一个元素，并对其应用了透明的背景颜色。< br >在某些情况下，这可能是一个问题。

Answer 2

我知道OP没有使用预处理器，但如果下面的信息是答案的一部分，我会得到帮助（我还不能评论，否则我会评论@BoltClock answer）。

例如，如果您使用的是scss，上面的答案将会失败，因为scss试图使用scss特定的rgba()/hsla()函数来编译样式，该函数需要4个参数。但是，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>

Answer 3

您不能获取现有的颜色值并对其应用alpha通道。也就是说，您不能获取现有的十六进制值，例如#f0f0f0，给它一个alpha组件并将结果值与另一个属性一起使用。

但是，自定义属性允许您将十六进制值转换为 RGB 三元组以用于 rgba（），将该值存储在自定义属性中（包括逗号！），使用 var（） 将该值替换为具有所需 alpha 值的 rgba（） 函数，这样它就起作用了：

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

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

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

html lang-html prettyprint-override"><p id="element">If you can see this, your browser supports custom properties.</p>