CSS Techniques - CSS3 RGB Aplha

RGBA Colours

Interested in the opacity used for the menu / header / footer on this site? The technique used is a new feature of CSS3, rgba (the 'a' stands for alpha). Essentially this technique allows you to specify the opacity for a single colour. The advantage of this is that the background color of a div can have an opacity value applied to it, whilst the text and images in that div are left untouched.

To the right is a red container div. Inside it on the left are divs that have had a RGBA opacity applied to the background colour, and on the right standard CSS opacity which is applied to the whole div. This clearly shows how standard opacity allows the background colour to show through the whole div.

Why is this important? Well if you have a photograph in the background, and you want to have a see-through background without affecting the text (as as per this website's header / footer / menu), then CSS3 RGBA is the way to do it.

A stripped down demo can be seen here.

CSS

HTML

Notes

To accomodate browsers that do not support RGBA just include the same values as rgb values. That way old browsers (i.e. the dreaded IE6) will not apply any opacity, whilst browsers that support rgba will have the opacity as intended, thus ensuring that the text remains readable.