I'm designing an app using Electron so I can access CSS variables. I defined a color variable invars.css:
:root { --color: #f0f0f0; }
I want to use this color inmain.cssbut with some opacity applied:
#element { background: (somehow use var(--color) at some opacity); }
How should I do it? I'm not using any preprocessor, just CSS. I'd prefer an all-CSS answer, but I'll accept JavaScript/jQuery.
I can't useopacitybecause the background image I'm using shouldn't be transparent.
![[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); }