Make HTML Elements Semi-Transparent

Internet Explorer does not support the opacity CSS property like Firefox and Safari. The solution is (as usual) to take advantage of IE filters to acheive a similar effect. This simple function sets opacity/transparency correctly across all modern browsers:

function setOpacity(element, opacity) {
    if (navigator.userAgent.indexOf("MSIE") != -1) {
        var normalized = Math.round(opacity * 100); = "alpha(opacity=" + normalized + ")";
    } else { = opacity;

This example usage sets the opacity of the given element to 50%:

setOpacity(document.getElementById("image2"), 0.5);

You can also set the opacity properly with static CSS if that is appropriate for your project. This CSS snippet is equivalent to the line of JavaScript above:

#image2 {
  filter: alpha(opacity=50);
  opacity: 0.5;

See the example


Not enough, the element needs to be layouted.
You've juste saved meĀ !
Your little examples are so clear, it becomes easy !!
nice and easy example
Good work!!!!!
Took me awhile because I'm rendering the html from server-code however:



you are a star!

Many thanks,

opacity is new to me and I'm just experimenting with AJAX but thanks to your clever and simple code I was able to animate an image fading into the page.

thankyou thankyou
Re: to [email protected]
what has AJAX to do with transparency?
nice I like this......
I am lovin it.
You are the best teachers.

I thought this article talked about how to make transparent the page while there is a progress animated image on the top. Anybody knows where i can find this? Thanks.

Write a Comment