mdibb.co.uk

Transparency (or opacity if you want to call it that) in CSS is something I always forget how to do properly for some reason, so this blog post is partly just here to remind me how to do it next time!

As usual, Internet Explorer has a different technique to make things transparent than Firefox and Opera. Internet Explorer uses the “filter” property, and then some sort of function call to alpha(); for example to set something to be 50% transparent, we’d use this code:

filter : alpha(opacity=50);

Fairly simple as I am sure you’ll agree. Firefox and Opera use the “opacity” property though, which is even simpler; again to make something 50% transparent in Firefox and/or Opera, we’d use this:

opacity : 0.5;

As you may have noted, Internet Explorer expects a value from 1 to 100 (i.e. a typical percentage value) to control how opaque something is, where as Firefox and Opera expect that same percentage expressed as a decimal. Its nothing to worry about - just divide the percentage by 100 to get the decimal - but its something to keep in mind if you are wondering why your “50″ percent opacity appears to be 100% in Firefox or Opera!

Obviously to be able to use this on all browsers we’ll have to put this all together into a class that we can use on anything to make it transparent:

.transparent {filter : alpha(opacity=50); opacity : 0.4; }

Now using this class will mean we get a 50% transparent image or div etc in all the 3 main browsers.

A quick word of warning regarding Internet Explorer - it might complain that it has blocked content to prevent a script from running or something along those lines if you are trying this locally. I am not sure why this is the case, but I suspect it is because the function call (mentioned above) actually interfaces with an ActiveX object somewhere in the bowels of Internet Explorer to make anything happen. This doesn’t pose a problem when not testing locally though on default security settings.