How to apply opacity to CSS color variables?
P粉495955986
2023-08-24 00:12:47
<p>I'm designing an app using Electron so I can access CSS variables. I defined a color variable in vars.css: </p>
<pre class="brush:css;toolbar:false;">:root {
--color: #f0f0f0;
}
</pre>
<p>I want to use this color in <code>main.css</code> but with some opacity applied: </p>
<pre class="brush:css;toolbar:false;">#element {
background: (somehow use var(--color) at some opacity);
}
</pre>
<p>How do I do it? I'm not using any preprocessor, just CSS. I'd prefer an all-CSS answer, but I'll accept JavaScript/jQuery. </p>
<p>I can't use <code>opacity</code> because the background image I'm using shouldn't be transparent. </p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You cannot take an existing color value and apply an alpha channel to it. That is, you cannot take an existing hexadecimal value (such as
#f0f0f0), give it an alpha component and use the resulting value with another property.However, the custom property allows you to convert the hexadecimal value to an RGB triplet for use with
rgba(), storing the value in the custom property (including the comma!) , use thevar()function to convertrgba()with the desired alpha value, and it will work::root { /* #f0f0f0 in decimal RGB */ --color: 240, 240, 240; } body { color: #000; background-color: #000; } #element { background-color: rgba(var(--color), 0.8); }