这在CSS中确实是可行的。它只是有点脏，你必须使用渐变。我已经编写了一个小片段作为示例，请注意，对于深色背景，你应该使用黑色不透明度，对于浅色背景-白色背景。

:root { --red: rgba(255, 0, 0, 1); --white-low-opacity: rgba(255, 255, 255, .3); --white-high-opacity: rgba(255, 255, 255, .7); --black-low-opacity: rgba(0, 0, 0, .3); --black-high-opacity: rgba(0, 0, 0, .7); } div { width: 100px; height: 100px; margin: 10px; } .element1 { background: linear-gradient(var(--white-low-opacity), var(--white-low-opacity)) no-repeat, linear-gradient(var(--red), var(--red)) no-repeat; } .element2 { background: linear-gradient(var(--white-high-opacity), var(--white-high-opacity)) no-repeat, linear-gradient(var(--red), var(--red)) no-repeat; } .element3 { background: linear-gradient(var(--black-low-opacity), var(--black-low-opacity)) no-repeat, linear-gradient(var(--red), var(--red)) no-repeat; } .element4 { background: linear-gradient(var(--black-high-opacity), var(--black-high-opacity)) no-repeat, linear-gradient(var(--red), var(--red)) no-repeat; } <div class="element1">hello world</div> <div class="element2">hello world</div> <div class="element3">hello world</div> <div class="element4">hello world</div>

我知道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，因此编译时不会收到错误。

SCSS / sass

优点:你可以只使用十六进制颜色值，而不是为每个通道(0-255)使用8位。

这是我最初的想法:https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables

编辑:你也可以修改alpha函数，只使用#{$color-name}-rgb，省略生成的*-r， *-g， *-b CSS变量。

结果

body {
  --main-color: rgb(170, 68, 204);
  --main-color-rgb: 170,68,204;
  --main-color-r: 170;
  --main-color-g: 68;
  --main-color-b: 204;
}

.button-test {
  // Generated from the alpha function
  color: rgba(var(--main-color-r), var(--main-color-g), var(--main-color-b), 0.5);
  // OR (you wrote this yourself, see usage)
  color: rgba(var(--main-color-rgb), 0.5);
}

用法:

body {
    @include defineColorRGB(--main-color, #aa44cc);
}

.button-test {
  // With alpha function:
  color: alpha(var(--main-color), 0.5);
  // OR just using the generated variable directly
  color: rgba(var(--main-color-rgb), 0.5);
}

Mixin和函数

@mixin defineColorRGB($color-name, $value) {
    $red: red($value);
    $green: green($value);
    $blue: blue($value);
    #{$color-name}: unquote("rgb(#{$red}, #{$green}, #{$blue})");
    #{$color-name}-rgb: $red,$green,$blue;
    #{$color-name}-r: $red;
    #{$color-name}-g: $green;
    #{$color-name}-b: $blue;
}

// replace substring with another string
// credits: https://css-tricks.com/snippets/sass/str-replace-function/
@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);
    @if $index {
        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    }
    @return $string;
}

@function alpha($color, $opacity) {
    $color: str-replace($color, 'var(');
    $color: str-replace($color, ')');
    $color-r: var(#{$color+'-r'});
    $color-g: var(#{$color+'-g'});
    $color-b: var(#{$color+'-b'});
    @return rgba($color-r, $color-g, $color-b, $opacity);
}

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

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" />

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

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

或者只是设置不透明度:

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

你可以为每种颜色设置特定的变量/值——原始的和不透明的:

:根{ -颜色:# F00; ——color-opacity: rgba(255, 0, 0, 0.5); ｝ # a1 { 背景:var(颜色); ｝ # a2 { 背景:var(——color-opacity); ｝ < div id = " a1 " > asdf < / div > < div id = " a2 " > asdf < / div >

如果你不能使用这个，你可以使用javascript解决方案，你可以使用这个:

$(function() { $('button').click(function() { bgcolor = $('#a2').css('backgroundColor'); rgb_value = bgcolor.match(/\d+,\s?\d+,\s?\d+/)[0] $('#a2').css('backgroundColor', 'rgba(' + rgb_value + ', 0.5)'); }); }); :root { --color: #F00; } #a1 { background: var(--color); } #a2 { background: var(--color); } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="a1">asdf</div> <div id="a2">asdf</div> <button>Click to change opacity</button>