1

I'm using CSS variables to define all colours in my page.

Then, a variable named --opac is used in every colour's alpha channel to control the required level of opacity, when different from the default value of 1 (fully opaque).

Some overlaid elements require less opacity (using the same colours).

However, redefining the --opac in the .overlaid-div's scope does not change the opacity of the colour as intended, but instead the colours retain the global opacity value!

:root{
   --white:rgba(255,255,255,var(--opac));
   --blue:rgba(0,0,255,var(--opac));
   /*etc....*/

   --opac:1 /*this is the default opacity*/
}
.overlaid-div {
   --opac:0.8;
   background-color:var(--white);
}

#particular-overlaid-div {
   --opac:0.4;
   background-color:var(--white);
}

/* etc... */
<html>

<body style="background-color:darkblue; color:turquoise">
<div style="background-color:white">A default element</div>
<div class="overlaid-div">An overlaid element (should be slightly transparent)</div>
<div id="particular-overlaid-div">A particular overlaid element (should be very transparent)</div>
</body>
</html>

Also, I've tried to interleave calc() at different depths to see whether it would force an update, without success.

The ideal solution would use pure CSS (no JS or preprocessors) and keep colour access within each overlaid item as simple as {background-colour:var(--colourname)}.

So, while background-colour:rgba(var(--whitergb),var(--opac)) would work, if :root{--whitergb:0,0,0} was added, this is not simple enough.

Pedro PSI
  • 11
  • 1

0 Answers0