RGBA Cross Browser Support + Solution

Jun 30, 2009 · 1 minute read
Category: web design

This is post is now quite old and the the information it contains may be out of date or innacurate.

If you find any errors or have any suggestions to update the information please let us know or create a pull request on GitHub

I recently came across rgba colours which are a very simple and logical way to produce a colour (rgb) with alpha transparency as well. This is ideal if for example you want to create a translucent white box to put some text in.

CSS does have some (dodgy) opacity controls, but they set everything as transparent including any text or pictures contained within the element. By using rgba, we can set a translucent background colour and have opaque elements contained within.

As usual, to get it to work in IE requires some extra effort, however this hack mentioned here and originally credited here seems to offer a solution.