Make HTML Elements Semi-Transparent

By Bret Taylor, July 23, 2006

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);
        element.style.filter = "alpha(opacity=" + normalized + ")";
    } else {
        element.style.opacity = 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

Digg  del.icio.us  Reddit

Comments

On December 16, 2006, Laurent wrote
Not enough, the element needs to be layouted.

http://www.satzansatz.de/cssd/onhavinglayout.html
On December 24, 2006, .rod. wrote
You've juste saved me !
Your little examples are so clear, it becomes easy !!
Thanksssss
On December 26, 2006, vishal wrote
nice and easy example
Good work!!!!!
On January 22, 2007, Ian MG Smith wrote
Took me awhile because I'm rendering the html from server-code however:

IT WORKED LIKE A CHARM

and

you are a star!

Many thanks,

Ian
On February 7, 2007, [email protected] wrote
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
On July 23, 2007, cooler wrote
Re: to [email protected]
what has AJAX to do with transparency?
On July 23, 2007, colin scholey wrote
nice I like this......
On February 14, 2008, abdul kader wrote
I am lovin it.
You are the best teachers.

Cheers
On March 22, 2008, Leo wrote
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.
On December 25, 2008, rr wrote
rrr

Write a Comment