我如何应用不透明度的CSS颜色变量?

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

:root {
  --color: #f0f0f0;
}

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

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

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

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

当前回答

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

:根{ -颜色:# 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>

2016-10-13 00:59:23

其他回答

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

2016-12-21 13:48:42

如果你像我一样喜欢十六进制颜色，还有另一个解决方案。十六进制值是6位，之后是alpha值。 00是100%透明99是75%然后它用字母“a1-af”然后“b1-bf”以“ff”结尾，这是100%不透明。

:root {
--color: #F00;
}

#element {
background: var(--color)f6;
}

2018-08-24 16:20:32

你不能获取一个现有的颜色值并应用alpha通道。也就是说，你不能使用一个现有的十六进制值，如#f0f0f0，给它一个alpha组件，并将结果值与另一个属性一起使用。

然而，自定义属性允许您将十六进制值转换为rgba()使用的RGB三元组，将该值存储在自定义属性中(包括逗号!)，使用var()将该值替换为rgba()函数与您想要的alpha值，它将工作:

:根{ /* #f0f0f0十进制RGB */ ——颜色:240、240、240; ｝身体{ 颜色:# 000; background - color: # 000; ｝ #{元素 Background-color: rgba(var(——color)， 0.8); ｝ <p id="element">如果你能看到这个，说明你的浏览器支持自定义属性

这似乎好得令人难以置信它是如何工作的?

神奇之处在于，自定义属性的值被替换，就像在属性值中替换var()引用时一样，在计算该属性值之前。这意味着就自定义属性而言，示例中的——color值根本不是颜色值，直到某个地方出现了需要颜色值的var(——color)表达式(并且仅在该上下文中)。css-variables规范第2.1节:

自定义属性所允许的语法非常宽松。< declarations -value>结果匹配一个或多个令牌的任何序列，只要该序列不包含<bad-string-token>， <bad-url-token>， unmatched <)-token>， <]-token>，或<}-token>，或顶级<分号-token>令牌或< delimi -token>值为"!"的令牌。

例如，下面是一个有效的自定义属性: ——foo: if(x > 5) this。宽度= 10; 虽然这个值作为变量显然是无用的，因为它在任何普通属性中都是无效的，但JavaScript可能会读取它并对其进行操作。

第三部分:

如果属性包含一个或多个var()函数，并且这些函数在语法上是有效的，则必须假设整个属性的语法在解析时是有效的。它只在var()函数被替换之后，在计算值时进行语法检查。

这意味着在计算声明之前，上面看到的240,240,240值直接被替换到rgba()函数中。所以这个:

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

这似乎不是一个有效的CSS，因为rgba()期望不少于四个逗号分隔的数值，变成这样:

#element {
  background-color: rgba(240, 240, 240, 0.8);
}

当然，这是完全有效的CSS。

更进一步，你可以将alpha组件存储在它自己的自定义属性中:

:root {
  --color: 240, 240, 240;
  --alpha: 0.8;
}

代入，得到同样的结果:

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

这允许你有不同的alpha值，你可以在飞行中交换。

1好吧，如果你在一个不支持自定义属性的浏览器中运行代码片段，那么它就是。

2016-12-21 14:38:58

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

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

或者只是设置不透明度:

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

2016-10-13 00:55:45

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

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

2016-10-13 00:59:23

我如何应用不透明度的CSS颜色变量?

推荐文章

最新文章

标签