CSS variables for rgb opacity

Can opacity be set as a css rgb variable?

:root {
  --unvisited-color: #595144;
     --r: 174;
     --g: 147;
     --b: 118;
     /*--o: 0.2;*/
     --rgb: rgb(var(--r), var(--g), var(--b)/*, var(--o)*/);
  --th-color: var(--rgb); }   
th         { 
            padding: 6px; 
            /*opacity: 0.2;
              filter: alpha(opacity=20);*/
            background-color: var(--th-color);
            /* rgba(174,147,118,0.2); */
            padding: 6px;
            border-bottom: 2px solid #595144;
            vertical-align: top; 
            text-align: left; 
            width: 40px; 
            overflow: hidden;  
            white-space: nowrap; }

I can set the rgb variables but not the opacity.
I tried,

opacity: 0.2;
filter: alpha(opacity=20

But this sets the whole of <th> element to be transparent, including the text.

You can by using rgba, rather than just rgb.

CSS Colors (RGBA)
The CSS3 specification adds the ability to specify the “alpha”, or opacity, of a color. The alpha is specifed as a decimal number between 0.0 (transparent) and 1.0 (opaque).


<div style="background-color: rgba(255,0,0,0.2);"></div>

Hi Chris,
Thanks, yes I am aware of this. I commented out rgba() in the code above.
Basically instead of having,


I would like to be able to replace it with a variable so that making one change will change it everywhere.


I think I see what I was doing wrong. Should be,

–rgb: rgba(var(–r), var(–g), var(–b)/, var(–o)/);

That is it should be rgba(..) not rgb(...)

I think it is working now.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.