我正在设计一个电子应用程序,所以我可以访问CSS变量。我在vars.css中定义了一个颜色变量:
:root {
--color: #f0f0f0;
}
我想在main.css中使用这个颜色,但是使用了一些不透明度:
#element {
background: (somehow use var(--color) at some opacity);
}
我该怎么做呢?我没有使用任何预处理器,只有CSS。我更喜欢全css的答案,但我将接受JavaScript/jQuery。
我不能使用不透明,因为我使用的背景图像不应该是透明的。
我也遇到过类似的情况,但不幸的是,给出的解决方案对我不起作用,因为变量可以是任何东西,从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;
}
样式可能需要稍微改变一下,这取决于背景应该应用到的元素。
另外,它可能并不适用于所有情况,但希望它能在其他解决方案无法使用的某些情况下有所帮助。
编辑:
我刚刚注意到,这个解决方案显然也影响了文本颜色,因为它在目标元素前面创建了一个元素,并对其应用了透明的背景色。
在某些情况下,这可能是个问题。
我也遇到过类似的情况,但不幸的是,给出的解决方案对我不起作用,因为变量可以是任何东西,从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;
}
样式可能需要稍微改变一下,这取决于背景应该应用到的元素。
另外,它可能并不适用于所有情况,但希望它能在其他解决方案无法使用的某些情况下有所帮助。
编辑:
我刚刚注意到,这个解决方案显然也影响了文本颜色,因为它在目标元素前面创建了一个元素,并对其应用了透明的背景色。
在某些情况下,这可能是个问题。
你可以为每种颜色设置特定的变量/值——原始的和不透明的:
:根{
-颜色:# 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>
我知道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,因此编译时不会收到错误。