CSS rgba() Function
rgba() function can be used to provide a color value with alpha transparency when using CSS. It allows you to specify an RGB color value, as well as an alpha value to determine the color's transparency.
rgba() function works just like the
rgb() function (in that it accepts the RGB value as a parameter), except
rgba() accepts a fourth value — the alpha channel.
The RGBA value is provided as a comma-separated list of four values, which represent the red, green, blue, and alpha channels respectively.
Each of the RGB values can be provided as either an integer or as a percentage. The integer value
255 corresponds with a percentage value of
However, on the alpha channel, the value should be in the range 0.0 (fully transparent) to 1.0 (fully opaque).
Web Page Example
Here's a working example of using the
rgba() function to define colors for a web page.
You can see that the
article element is partially transparent (its alpha value is
Tweak the above alpha values to see the effect it has on each element's transparency.
Examples of Alpha Variations
Here's an example of the same color repeated multiple times (across a background image), but each one with a different alpha value.
All other values are the same (i.e. the red, green, blue are the same across all rows), only the alpha channel changes.
This demonstrates that the background image becomes less visible as the alpha value increases (the stars are the background image).