Background Color Transparency with RGBa

01.03.2013

Using RGBa to set your background colour of HTML elements is great as it allows you to use transparency.

It looks like this:

element {background-color: rgba(255,255,255,.15);}

Super neat for rollover effects where you can set the background colour to white on the rollover state with a low transparency, in this case 0.15. This has the effect of tinting the colour underneath, and makes it easy for colour scheme changes later on.

Transparent elements look cool but in the past you have either had to set the whole div to be transparent and also effecting any text inside it, or upload transparent background images.

NB Using rgba is CSS3 and works only in the latest browsers at the moment. That is IE9, Safari 3, Firefox 3 and any version of Google Chrome. Worth setting a few fallback states.