CSS variables for rgb opacity

[ofeyofey]

Hi,
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.
Thanks,
Shane

[chrisofarabia]

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).

Example

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

[ofeyofey]

@chrisofarabia

You can by using rgba

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

rgba(174,147,118,0.2);

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

Thanks,
Shane

[ofeyofey]

@ofeyofey

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

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.
Thanks,
Shane