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