Opacity in Firefox, Safari and IE
Internet Explorer has suppored opacity for a long time but it’s also possible to change the opacity of a layer in Safari, and both newer and older versions of Mozilla (including Firefox).
The code for setting the opacity of a layer to 50% (in JavaScript) is:
- For IE/Win: layer.style.filter = “alpha(opacity:50)”;
- For Safari (pre version 1.2), Konqueror: layer.style.KHTMLOpacity = .5;
- For older versions of Mozilla and Firefox: layer.style.MozOpacity = .5;
- For Safari 1.2, newer Firefox and Mozilla using CSS3: layer.style.opacity = .5;
The main difference now between IE and the other browsers is that in IE opacity is specified as 0 to 100 whereas in Firefox and Safari it is a decimal from 0 to 1.
2 Replies to “Opacity in Firefox, Safari and IE”
Thanks Karl, this is the solution I was looking for. I am working within the DOM via Javascript, and I was trying to create a fade effect that worked in IE, Safari, Firefox on the PC and MAC. and this was it! The key being to define them in the exact order you have them written in… I was trying to do IE last, but it must be done first.Take care.
very helpful, thanks a lot.