如何将不透明度应用于CSS颜色变量？
如何将不透明度应用于CSS颜色变量？
提问于 2016-10-13 08:51:12
我正在设计一个电子应用程序，所以我可以访问CSS变量。我在vars.css中定义了一个颜色变量
:root {
--color: #f0f0f0;
}我想在main.css中使用此颜色，但应用了一些不透明度：
#element {
background: (somehow use var(--color) at some opacity);
}我该怎么做呢？我没有使用任何预处理器，只使用CSS。我更喜欢全CSS的答案，但我会接受JavaScript/jQuery。
我不能使用opacity，因为我使用的背景图像不应该是透明的。
回答 6
Stack Overflow用户
发布于 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，因此在编译过程中不会收到任何错误。
Stack Overflow用户
发布于 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" />
Stack Overflow用户
发布于 2016-12-22 21:13:25
:root{
--color: 255, 0, 0;
}
#element{
background-color: rgba(var(--color), opacity);
}将不透明度替换为0到1之间的任何值
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40010597
复制相关文章
相似问题