Welcome to the OzoneAsylum FaqWiki
Frequently Asked Questions

How can I control opacity using CSS? Pages that link to <a href="https://ozoneasylum.com/backlink?for=5015" title="Pages that link to How can I control opacity using CSS?" rel="nofollow" >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).


(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)

« BackwardsOnwards »

Show Forum Drop Down Menu