对于使用rgba()与一般css变量，尝试这样做:

在:root内部声明颜色，但不要像其他答案那样使用rgb()。只需要写值

:根{ ——color: 255,0,0; ｝

使用——color变量使用var()作为其他答案

#某个元素{ 颜色:rgba(var(——Color)，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>

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

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

或者只是设置不透明度:

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

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

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

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

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);
}

这在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>