If you want to convert an existing color value (defined as either a variable or hex value) to an RGBA value (including an alpha layer for transparency), use the rgba
function:
background-color: rgba(red,.9);
This will produce following CSS:
background-color: rgba(255, 0, 0, 0.9);
The two arguments needed are the color and then the value of the alpha layer (0
is entirely transparent, 1
is entirely opaque, .5
is halfway between the two).
From a practical point of view, it's similar to transparentize
/fade-out
and opacify
/fade-in
.