How can I control opacity using CSS?

selector {

	filter: alpha(opacity=50);

	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

	-moz-opacity: .5;

	-khtml-opacity: .5;

	opacity: .5; /* for future compatibility */

}

The first two are variants for Internet Explorer -- although both will currently work, the second was introduced in IE5.5 and is based on ActiveX technology. This will be the only one supported in the future.

Note: On some elements, IE requires the width or height to be given for the opacity to work.

Note 2: Mozilla had support for percentage values before, but not any longer.

---------------------

Need to do this in Javascript? You can use this function to control those attributes dynamically. Note: in IE you'll need to have specified the opacity in the style sheet to access the value from Javascript, even if it starts from 100%. Here's a simple little script for you all!

function setOpacity(which,num) {

if(document.all)  document.getElementById(which).filters.alpha.opacity=num; 

else if(document.getElementById)  document.getElementById(which).style.MozOpacity=num+'%';

       }

"which" is the id of the object you want to set the opacity for, and "num" is the percentage. Simple, no?

----------------------------
Relevant threads:

Partially transparent background on a div...
divs - opacity ~


----------------------------
Relevant note:

As of writing this FAQ is number 1 at Google in the search for the terms css, opacity (up from 5 and previously 6) and number 3 for the terms opacity, css. It is also number 2 for the terms css, partially, transparent (up from 3).

_____________________
Emperor

(Added by: Emperor on Fri 24-May-2002)

(Edited by: DocOzone on Fri 24-May-2002)

(Edited by: Emperor on Tue 03-Sep-2002)

(Edited by: kuckus on Tue 03-Sep-2002)

(Edited by: Emperor on Thu 07-Nov-2002)

(Edited by: HZR on Wed 29-Oct-2003)

(Edited by: HZR on Thu 30-Oct-2003)