With increasing support for CSS3 you now have two options for changing the opacity of elements with CSS. Opacity which has been round since 2004 and RGBA (red blue green alpha) has only been available this year, so lets have a look at the options:

Opacity

• Supported by Firefox 2+, Safari 2+, Chrome, Opera 8+, IE8
• Hack for IE5.5, 6 & 7
• Inheritance (opacity is not inherited, but it effects all children of the element)
• If the property is not supported by the browser the opacity of the element is 100% (solid)

RGBA

• Supported by Firefox 3, Safari 3, Chrome
• Not inherited, no effects on child elements
• Can not be applied to images
• If RGBA is not supported by the browser, uses previous colour values or defaults

In detail

opacity: 0.5

Will make that element and all children of the element 50% opaque. To get the same results in IE:

filter:alpha(opacity=50);

This of course is not valid CSS, so use it and ignore the validator or hide it behind conditional comments (up to you, but you get the desired results). Also it looks like the element needs to HasLayout for the filter to work.

The biggest problem is that opacity is affects the display of all children of the element (except for IE). So you have to be very cautious with it’s use. For example, you wanted to have a white translucent box over the bottom of an image with some opaque text.

<div style="background-color: #fff; opacity: 0.30;"><p style="color: #000;"…

Will result in a white translucent background of 30%, and equally translucent black text. Trying to rest opacity has no effect, and trying to set the transparency of the child to 70%, makes it even more transparent (30% * 70% = 21%). So you need to take the child element out of the flow, by example using position: absolute.

If opacity property is not supported by the browser, it render the element with an opacity of 100%.

RGBA is far simpler to apply

<div style="background-color: rgba(255,255,255,0.3);">

Delivers a white background with a 30% opacity without having to worry about the effects on it’s children.

For browsers that don’t support RGBA.

<div style="background-color: #fff; background-color: rgba(255,255,255,0.3);">

Supplies an opaque background, if that is your preference. Or

<div style="background-color: transparent; background-color: rgba(255,255,255,0.3);">

A transparent background, as transparent is the default you can leave it out.

So which on to use?

Well it depends: on what browsers you want to target and what you want browsers which do not support which method you choose. Lets go back to the example of wanting to put a translucent white section at the bottom of a slide show, with opaque buttons and caption and you need to get it to work in IE6 & IE7.

Using opacity

The background element opacity is set to be translucent, the buttons and caption are taken out the flow by using position: absolute. Conditional comments feeds a stylesheet with filter:alpha(opacity=X) to IE7 and below.

Advantages

• Works in most common browsers

Disadvantages

• Painful to code and maintain

Using RGBA

The background element RGBA is set to be translucent, uses straight forward HTML. Conditional comments feeds a stylesheet to IE7 and below with filter:alpha(opacity=X) for the background element and to correct it’s children.

Advantages

• Easy to code and maintain
• Forward compability

Disadvantages

• Does not work in Opera, Firefox 2 or Safari

Using 24bit PNG as background image

A translucent 24bit PNG is used as an background image. 24 bit PNGs are not supported by IE 6, so you can use conditional comments to feed a stylesheet to IE6 and below, with a new background image and filter:alpha(opacity=X) to get the right level of transparency and correct it’s children opacity with filter:alpha(opacity=X).

Advantages

• Easy to code and maintain
• Works in most common browsers

Disadvantages

• Requires a background image
• IE6 support is painful

Conclusion

I have been using the 24bit PNG background image, method for a few years now, however, I would consider using the RGBA method now, with or without IE support depending on the task and whether it is a progressive enhancement or a required feature. The opacity property is just too difficult for complex project, but great for single element.