CSS background transparency without affecting child elements

Getting the desired effects for semi-transparency in CSS is harder than one might think.

1. Possibility would be using CSS and Opacity.

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. You can cater to this problem with creating redundant elements, some tricky CSS positioning and such, but really, it’s a mess.

2. Possibility would be creating a 24-bit PNG background image

The problem with PNG images is, beside a superfluous HTTP request, that images are 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

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:

.alpha60 { /* Fallback for web browsers that doesn't support RGBa */ background: rgb(0, 0, 0); /* RGBa with 0.6 opacity */ background: rgba(0, 0, 0, 0.6); }  

 The transparency will only be applied to the background

A little caveat

Shockingly enough no version of Internet Explorer supports RGBa colors. 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:

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

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.

A quick way is to use the beauty of JavaScript. Just open up Firebug and type this into the console:

// Replace 0.6 with your desired alpha level 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

.alpha60 { /* Fallback for web browsers that doesn't support RGBa */ background: rgb(0, 0, 0); /* RGBa with 0.6 opacity */ background: rgba(0, 0, 0, 0.6); /* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 8*/ -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; }

NOTE! You have to declare background: transparent for IE web browsers!