CSS background transparency without affecting child elements, through RGBa and filters

A background transparency / opacity discussion created by Robert Nyman: 

http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/ 

CSS background transparency without affecting child elements, through RGBa and filters

Published on Monday, January 11, 2010

Looking at the design of most web pages today, almost exclusively all of them include some semi-transparency of elements. However, getting the desired effect in CSS is harder than one might think.

The problem

If we want an element to have a semi-transparent background, and let whatever is behind it shine through, we have two options:

• Using CSS and opacity
• Creating a 24-bit PNG background image

The problem with using opacity in CSS, besides the annoying syntax to cater to all web browsers, is that not only the background of the element will have transparency, but all of its child elements as well. This means that any text within will have the same opacity, which I would dare to venture is very seldom the result one wants. You can cater to this problem with creating redundant elements, some tricky CSS positioning and such, but really, it’s a mess.
The problem with PNG images is, beside a superfluous HTTP request, that images are way, way more larger in file size than one or two lines of CSS code – especially considering that the image has to be a bit larger to avoid serious memory leak issues with 24-bit PNG images with alpha transparency in Internet Explorer.

The solution!

Therefore, I can happily offer an alternative for you: RGBa colors. The beauty in this is that you declare the normal RGB values + values for the level of transparency you want, resulting in a very easy way to declare transparency for a color. Making this happen with CSS, with a fallback for those web browsers that doesn’t support it, would look like this:

view sourceprint?

1..alpha60 {

2.    /* Fallback for web browsers that doesn't support RGBa */

3.    background: rgb(0, 0, 0);

4.    /* RGBa with 0.6 opacity */

5.    background: rgba(0, 0, 0, 0.6);

6.}

The transparency will only be applied to the background – fantastic, isn’t it?!

A little caveat

Shockingly enough (erm), no version of Internet Explorer supports RGBa colors (i.e. not IE 6, IE 7 or IE 8 at the time of this writing). However, and lucky for us, in year 2000 Microsoft went crazy with implementing various filters in IE. One of them are the gradient filter, and what we can do is use that and just define the same start and end color. “Ok, but how do I get the transparency”, you might be thinking now. The answer to that is that you will declare that as part of the color hex value. A CSS gradient filter achieving the same effect as the CSS code above would look like this:

view sourceprint?

1..alpha60 {

2.    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);

3.}

As you can see, it is actually declared as part of an 8-digit hex value, where the first two numbers is the alpha hex value, the next two is Red, and so on. The difference between how we do it with RGBa is that the hex value will range from 0 to 255, just as any color value. So, how do we convert an alpha level of 0.6 to its hex value?
This where a little Math comes in the picture. Basically, we take our desired alpha level, 0.6, and multiplies it with 255 – then we convert that result into hex. One very easy way to do this is make use of Google’s Search Features, and just search google for 0.6 * 255 in hex. Unfortunately, though, Google’s calculator seems to only handle integers, hence 0.3 * 255 in hex won’t give you a result.
An alternative, or quicker way altogether, is to use the beauty of JavaScript. Just open up Firebug and type this into the console:

view sourceprint?

1.// Replace 0.6 with your desired alpha level

2.Math.floor(0.6 * 255).toString(16);

99 is then corresponding to 0.6, and becomes the first two digits of the start and end colors for the gradient filter.

Combining it all

With all techniques learned above, let’s put it together in a working CSS rule:

view sourceprint?

01..alpha60 {

02.    /* Fallback for web browsers that doesn't support RGBa */

03.    background: rgb(0, 0, 0);

04.    /* RGBa with 0.6 opacity */

05.    background: rgba(0, 0, 0, 0.6);

06.    /* For IE 5.5 - 7*/

07.    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);

08.    /* For IE 8*/

09.    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";

10.}

NOTE! In addition to this, you have to declare background: transparent for IE web browsers, preferably served via conditional comments or similar!

Web browser support

RGBa support is available in:

• Firefox 3+
• Safari 2+
• Opera 10

Filters in Internet Explorer are available since Internet Explorer 5.5.
This means that this will work for virtually everyone!

Acknowledgements

Thanks to RGBa Browser Support and Bulletproof, cross-browser RGBA backgrounds, today for the information and inspiration.
Thanks to Emil Stenström and Pelle Wessman for coming up with countless alternatives for hex conversion, and explaining basic math to stupid me.