我正在设计一个电子应用程序,所以我可以访问CSS变量。我在vars.css
中定义了一个颜色变量
:root {
--color: #f0f0f0;
}
我想在main.css
中使用此颜色,但应用了一些不透明度:
#element {
background: (somehow use var(--color) at some opacity);
}
我该怎么做呢?我没有使用任何预处理器,只使用CSS。我更喜欢全CSS的答案,但我会接受JavaScript/jQuery。
我不能使用opacity
,因为我使用的背景图像不应该是透明的。
发布于 2017-12-04 10:17:17
我知道OP没有使用预处理器,但如果以下信息是这里答案的一部分,我会得到帮助(我还不能评论,否则我会评论@BoltClock answer。
如果您使用的是scss,则上面的答案将失败,因为scss尝试使用特定于scss的rgba()/hsla()函数编译样式,该函数需要4个参数。但是,rgba()/hsla()也是原生css函数,因此可以使用字符串插值来绕过scss函数。
示例(在sass 3.5.0+中有效):
:root {
--color_rgb: 250, 250, 250;
--color_hsl: 250, 50%, 50%;
}
div {
/* This is valid CSS, but will fail in a scss compilation */
background-color: rgba(var(--color_rgb), 0.5);
/* This is valid scss, and will generate the CSS above */
background-color: #{'rgba(var(--color_rgb), 0.5)'};
}
<div></div>
请注意,字符串插值将不适用于非CSS scss函数,例如lighten()
,因为生成的代码将不是函数式CSS。但是,它仍然是有效的scss,因此在编译过程中不会收到任何错误。
发布于 2021-05-31 12:02:15
你可以使用linear-gradient
来修改颜色:
background: linear-gradient(to bottom, var(--your-color) -1000%, var(--mixin-color), 1000%)
$(() => {
const setOpacity = () => {
$('#canvas').css('--opacity', $('#opacity-value').val())
}
const setColor = () => {
$('#canvas').css('--color', $('#color-value').val());
}
$('#opacity-value').on('input', setOpacity);
$('#color-value').on('input', setColor);
setOpacity();
setColor();
})
#canvas {
width: 100px;
height: 100px;
border: 2px solid #000;
--hack: 10000%;
background: linear-gradient( to bottom, var(--color) calc((var(--opacity) - 1) * var(--hack)), transparent calc(var(--opacity) * var(--hack)));
}
#container {
background-image: linear-gradient(45deg, #b0b0b0 25%, transparent 25%), linear-gradient(-45deg, #b0b0b0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #b0b0b0 75%), linear-gradient(-45deg, transparent 75%, #b0b0b0 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
padding: 10px;
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="canvas"></div>
</div>
<hr/>
<input type="range" id="opacity-value" min="0" max="1" step="0.1" value="0.5" />
<input type="color" id="color-value" />
发布于 2016-12-22 21:13:25
:root{
--color: 255, 0, 0;
}
#element{
background-color: rgba(var(--color), opacity);
}
将不透明度替换为0到1之间的任何值
https://stackoverflow.com/questions/40010597
复制相似问题