Patently transparent

by Joe Gillespie — Nov 1, 2004

'Opacity', it what your graphics program probably calls 'transparency'. Is the glass half opaque or half transparent? Whichever way you look at it, if you try it on the Web, you could have problems.

Opacity is not officially supported yet in CSS although it has been around for a while in proprietary, browser-specific guises.

In Microsoft Internet Explorer (Windows version only), you can use:

filter: alpha(opacity=<value>);

This is a semi-transparent foreground image on top of some graphic type on a div background. In browsers that don't support opacity, the type can't be read and that could be a problem.

HMS Endeavour

In this instance, the type is semi-transparent over an opaque background image. It's a nice effect but without opacity, it wouldn't matter too much!

where <value> ranges between zero (completely transparent) and 100 (totally opaque). So, if you specify:

filter: alpha(opacity=50);

for a div, img or for type, you will get 50% transparency.

To achieve the same effect in Gecko-based browsers like Netscape, Mozilla, FireFox or Camino, you need to use:

-moz-opacity: 0.5;

-moz-opacity doesn't use a percentage value. It runs between 0.0 and 1.0 – A value of 0.5 produces semi-transparency in this instance.

For Safari, you can use:

opacity: 0.5;

which is the system suggested for use in CSS3. The values are the same as used for -moz-opacity – 0.0 to 1.0

This class would therefore give you 50% transparency in all browsers that support opacity

.semitransparent { filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; }

That leaves two notable exceptions. IE Mac doesn't support opacity – and probably never will as it's effectively dead. Opera doesn't yet but will almost certainly support opacity in some future version when it becomes an 'official' part of the CSS specification.

So, bearing in mind that some browsers are just not going to give you anything other than 100% opacity, you can do what you like – have semi-transparent images and type, menus and buttons that gradually fade in and out – and be certain of ... err, nothing. Digg Technorati Blinklist Furl reddit Design Float