Up until IE7 Microsoft haven’t provided support for PNG images which in turn makes it difficult to apply transparent page effects. In CSS you can set the transparency in different ways. To ensure that it works on most browsers use all of the styles listed below:
- opacity: 0.5;
This one is the official CSS3 method, at the moment it works in most newer browsers.
- -moz-opacity: 0.5;
This one works in older versions of Mozilla and Phoenix/FireBird/FireFox.
- -khtml-opacity: 0.5;
This is used by browsers that use the KHTML rendering engine, namely Konquerer on Linux and Safari on MacOS.
- filter: alpha(opacity=50);
This one works only in MSIE.
It might not be the best coding standard, but the CSS will validate, and also your (X)HTML for that matter.
Note! getElementById refers to the elements selector ID, which means that you will not be able to modify CLASS selectors. The workaround above was implemented to validate my CSS when using the ID overlay in my add-on Lightbox.
Update: In order to hide your opacity settings you can do it even easier by simply adding the stylesheet containing the specifics like this: