我正在设计一个电子应用程序,所以我可以访问CSS变量。我在vars.css中定义了一个颜色变量:

:root {
  --color: #f0f0f0;
}

我想在main.css中使用这个颜色,但是使用了一些不透明度:

#element {
  background: (somehow use var(--color) at some opacity);
}

我该怎么做呢?我没有使用任何预处理器,只有CSS。我更喜欢全css的答案,但我将接受JavaScript/jQuery。

我不能使用不透明,因为我使用的背景图像不应该是透明的。


当前回答

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

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

或者只是设置不透明度:

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

其他回答

第一次在这里发帖。

一个简单的JavaScript解决方案

下面是一个简单的JavaScript函数,可以为命名颜色(如“红色”)添加透明度

虽然. setfillcolor()被贬低了,但它仍然在一些浏览器中实现(blink和webkit)。如果setFillColor()被完全丢弃,希望那时我们会有相对颜色语法。

function addTransparency(color, alpha) {
  const ctx = document.createElement('canvas').getContext('2d');
  ctx.setFillColor(color, alpha);
  return ctx.fillStyle;
}

CSS变量的使用

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Add Transparency to a Color</title>
<style>
:root {
  --color: lime;
  --alpha: 0.5;
}
.test {
  background-color: var(--color);
}
</style>
</head>
<body class='test'>
<script>
try{"use strict" 

/* Use the getComputedStyle() method to get the current value of the CSS variable --color and the --alpha variable. */

const color = getComputedStyle(document.documentElement).getPropertyValue('--color')||'white'; //added fallback to color white
const alpha = getComputedStyle(document.documentElement).getPropertyValue('--alpha')||1; //added fallback to solid color value of 1

/* Call the addTransparency() function with the color and alpha values as arguments, and store the result in a variable. */

const transparentColor = addTransparency(color, alpha);

/* Use the setProperty() method of the CSSStyleDeclaration interface to set the value of the --color CSS variable to the value of the transparentColor variable. */

document.documentElement.style.setProperty('--color', transparentColor);


function addTransparency(color, alpha) {
  const ctx = document.createElement('canvas').getContext('2d');
  ctx.setFillColor(color, alpha);
  return ctx.fillStyle;
}

}catch(e){document.write(e);}
</script>
</body>
</html>

啊,页面刷新,我失去了我输入的一切,张贴草稿保存。

: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,因此编译时不会收到错误。

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

我也遇到过类似的情况,但不幸的是,给出的解决方案对我不起作用,因为变量可以是任何东西,从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;
}

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

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