RGBA colors
CSS3 has added a new feature to color setting. Next to rgb you can now also use rgba. The “a” in this
property-name stands, for, you guessed it: alpha. This new feature allows us to specify an opacity value for a color. This one could
make life for webdevelopers a lot easier…
So far, this has only been implemented in Safari 3, and works in the latest Firefox 3 pre-alpha’s.
See the example:
See the difference in the code between the first row, which uses RGBA color values, and the second, which uses RGB values:
<div style="background: rgba(255, 0, 0, 0.2);"></div> <div style="background: rgba(255, 0, 0, 0.4);"></div> <div style="background: rgba(255, 0, 0, 0.6);"></div> <div style="background: rgba(255, 0, 0, 0.8);"></div> <div style="background: rgba(255, 0, 0, 1) ;"></div>
And the second one:
<div style="background: rgb(243, 191, 189);"></div> <div style="background: rgb(246, 143, 142);"></div> <div style="background: rgb(249, 95 , 94) ;"></div> <div style="background: rgb(252, 47, 47) ;"></div> <div style="background: rgb(255, 0, 0) ;"></div>
Read here how RGBA differs from opacity.