Not So Clear CSS Opacity and RGBa

Support for transparent PNG paved the way for the use of semitransparent elements within website designs. CSS3 introduced the ability for developers to alter the transparency of an object with the opacity property. This method has some inherent problems, luckily there is a solution; the much less well know RGBa model.

The Opacity Property

To change the opacity of an element using the opacity property, simply give it a value between 0 and 1 to set the elements’ opacity. For example, if you want a div to be 50% transparent, you would style it as follows:

div {
  opacity: .5;
  color: #fff;
  background-color: #000;
}

This works for Safari, Opera and Firefox. Internet Explorer, however, doesn’t support the opacity property. Microsoft in their usual wisdom invented their own property instead of going with convention so we have to use their proprietary property Alpha Filter in addition. The Alpha Filter requires you specify the opacity on a scale of 0 to 100. To add more complexity to the situation the element that you are applying the opacity filter to has to have a hasLayout value of true for the filter to be applied. Making an element have layout can be achieved by specifying a width, or using the common trick of giving the element a zoom value of 1. Our style sheet should now look like this:

div {
  background: #000;
  opacity: .5;
  filter: alpha(opacity='50');
  zoom: 1;
}

There is however an inherent problem when child elements are added. When you use the opacity property, the opacity is set for that element AND any children of that element. You can’t override the opacity of the child element either. If this is a problem in your design there is another way before you go back to using PNG’s.

The RGBa Way

CSS3 also introduced an extended version of the RGB colour model which includes a fourth value that is used to specify opacity. Again, like the opacity property, the alpha value in the RGBa model accepts a value between 0 and 1. We can use an RGBa value anywhere that colors values are accepted in CSS e.g. borders, background, font colors, etc.

The big advantage here is while the opacity property defines the opacity for an element and all of its children, the RGBa value only applies that transparency to the given property of that element. For example:

div {
  background-color: rgba(0,0,0,.5);
  color: #fff;
}

Browser support for RGBa is however still limited. Both Safari, Firefox 3 and Opera 10 support the RGBa system, but as usual IE does not. In most older browsers that don’t recognise RGBa values the declaration is simply ignored, as it should be. In IE it appears that RGBa values cause IE to not display the background at all. Great. A solution to this would be to use conditional comments to reset the background to a solid color for IE.

div {
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,.5);
  color: #fff;
}

To fix make sure IE shows a solid background colour add a conditional comment to the header of your page.

<!—[if IE]>
  <style type=“text/css”>
    /* Set Background Colour for IE */
    div { background-color: #000; }
  </style>
<![endif]—>

Finally the Background Image Way

If all else fails we can use a semitransparent PNG as a background image.

div {
  background-image: url('background.png');
}

The great thing is this method is supported by all browsers (IE6 can be fixed using TwinHelix PNGFix) but requires the image to be altered to change the amount of transparency, an extra HTTP request is needed to download the image and bandwidth is required to download the image.

As with most web design there is no definitive answer as to the method you should use. The current recommended method would be to use RGBa values but the lack of support in older browsers might make you think twice about the effort you need to make get it to work in IE and older browsers.

This article was posted on 18 December 2009 in CSS

That's the end of this article. I hope you found it useful. If you're enjoyed this article why don't you have a look around the archives, where you can find some more tutorials, tips and general ramblings.