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

然而，自定义属性允许您将十六进制值转换为rgba()使用的RGB三元组，将该值存储在自定义属性中(包括逗号!)，使用var()将该值替换为rgba()函数与您想要的alpha值，它将工作:

:根{ /* #f0f0f0十进制RGB */ ——颜色:240、240、240; ｝ 身体{ 颜色:# 000; background - color: # 000; ｝ #{元素 Background-color: rgba(var(——color)， 0.8); ｝ <p id="element">如果你能看到这个，说明你的浏览器支持自定义属性

这似乎好得令人难以置信它是如何工作的?

神奇之处在于，自定义属性的值被替换，就像在属性值中替换var()引用时一样，在计算该属性值之前。这意味着就自定义属性而言，示例中的——color值根本不是颜色值，直到某个地方出现了需要颜色值的var(——color)表达式(并且仅在该上下文中)。css-variables规范第2.1节:

自定义属性所允许的语法非常宽松。< declarations -value>结果匹配一个或多个令牌的任何序列，只要该序列不包含<bad-string-token>， <bad-url-token>， unmatched <)-token>， <]-token>，或<}-token>，或顶级<分号-token>令牌或< delimi -token>值为"!"的令牌。

例如，下面是一个有效的自定义属性: ——foo: if(x > 5) this。宽度= 10; 虽然这个值作为变量显然是无用的，因为它在任何普通属性中都是无效的，但JavaScript可能会读取它并对其进行操作。

第三部分:

如果属性包含一个或多个var()函数，并且这些函数在语法上是有效的，则必须假设整个属性的语法在解析时是有效的。它只在var()函数被替换之后，在计算值时进行语法检查。

这意味着在计算声明之前，上面看到的240,240,240值直接被替换到rgba()函数中。所以这个:

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

这似乎不是一个有效的CSS，因为rgba()期望不少于四个逗号分隔的数值，变成这样:

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

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

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

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

代入，得到同样的结果:

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

这允许你有不同的alpha值，你可以在飞行中交换。

1好吧，如果你在一个不支持自定义属性的浏览器中运行代码片段，那么它就是。

在CSS中，你应该能够使用rgba值:

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

或者只是设置不透明度:

#element {
  background: #f0f0f0;
  opacity: 0.5;    
}

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

如果你正在使用，例如scss，上面的答案将会失败，因为scss试图用特定于scss的rgba()/hsla()函数编译样式，这需要4个参数。然而，rgba()/hsla()也是css的原生函数，所以你可以使用字符串插值来绕过scss函数。

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

:根{ ——color_rgb: 250, 250, 250; ——color_hsl: 250, 50%， 50%; ｝ div { /*这是有效的CSS，但在scss编译中将失败*/ Background-color: rgba(var(——color_rgb)， 0.5); /*这是有效的scss，将生成*/上面的CSS background - color: # {' rgba (var(——color_rgb), 0.5)的}; ｝ < div > < / div >

请注意，字符串插值对非CSS的scss函数(如lightight())不起作用，因为生成的代码不是函数式CSS。但它仍然是有效的scss，因此编译时不会收到错误。

:root{
--color: 255, 0, 0;
}

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

你用0到1之间的任何东西替换不透明度

我也遇到过类似的情况，但不幸的是，给出的解决方案对我不起作用，因为变量可以是任何东西，从rgb到hsl到十六进制甚至颜色名称。 我现在解决了这个问题，通过应用背景颜色和不透明度到一个伪:after或:before元素:

.container {
    position: relative;
}

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

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

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

你可以使用线性渐变来改变颜色:

background: linear-gradient(to bottom, var(--your-color) -1000%, var(--mixin-color), 1000%)

$(() => { const setOpacity = () => { $('#canvas').css('--opacity', $('#opacity-value').val()) } const setColor = () => { $('#canvas').css('--color', $('#color-value').val()); } $('#opacity-value').on('input', setOpacity); $('#color-value').on('input', setColor); setOpacity(); setColor(); }) #canvas { width: 100px; height: 100px; border: 2px solid #000; --hack: 10000%; background: linear-gradient( to bottom, var(--color) calc((var(--opacity) - 1) * var(--hack)), transparent calc(var(--opacity) * var(--hack))); } #container { background-image: linear-gradient(45deg, #b0b0b0 25%, transparent 25%), linear-gradient(-45deg, #b0b0b0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #b0b0b0 75%), linear-gradient(-45deg, transparent 75%, #b0b0b0 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px; padding: 10px; display: inline-block; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <div id="canvas"></div> </div> <hr/> <input type="range" id="opacity-value" min="0" max="1" step="0.1" value="0.5" /> <input type="color" id="color-value" />