我正在设计一个电子应用程序，所以我可以访问CSS变量。我在vars.css中定义了一个颜色变量:
:root {
--color: #f0f0f0;
}
我想在main.css中使用这个颜色，但是使用了一些不透明度:
#element {
background: (somehow use var(--color) at some opacity);
}
我该怎么做呢?我没有使用任何预处理器，只有CSS。我更喜欢全css的答案，但我将接受JavaScript/jQuery。
我不能使用不透明，因为我使用的背景图像不应该是透明的。
当前回答
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);
}
其他回答
如果你像我一样喜欢十六进制颜色，还有另一个解决方案。 十六进制值是6位，之后是alpha值。 00是100%透明99是75%然后它用字母“a1-af”然后“b1-bf”以“ff”结尾，这是100%不透明。
:root {
--color: #F00;
}
#element {
background: var(--color)f6;
}
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);
}
我知道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，因此编译时不会收到错误。
对于使用rgba()与一般css变量，尝试这样做:
在:root内部声明颜色，但不要像其他答案那样使用rgb()。只需要写值
:根{ ——color: 255,0,0; ｝
使用——color变量使用var()作为其他答案
#某个元素{ 颜色:rgba(var(——Color)，0.5); ｝
我也遇到过类似的情况，但不幸的是，给出的解决方案对我不起作用，因为变量可以是任何东西，从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;
}
样式可能需要稍微改变一下，这取决于背景应该应用到的元素。 另外，它可能并不适用于所有情况，但希望它能在其他解决方案无法使用的某些情况下有所帮助。
编辑: 我刚刚注意到，这个解决方案显然也影响了文本颜色，因为它在目标元素前面创建了一个元素，并对其应用了透明的背景色。 在某些情况下，这可能是个问题。
