Layers Part 2 Setting Layer Opacity

Published at 2001-08-04 16:55:27

In the above example, both the 'pink' and red example are in fact the same red colour. The green layer lies behind both red layers and has a lower z-index, while being visible through the red layers because their opacity (or level of transparency) is set below 100%.

The left red layer is set to 25% opacity, the right to 75%, while the green layer is set to the default 100% opacity setting. Here is the code for the layers:

<style type="text/css">
#red1 {position:absolute; left:100px; top:150px; width:100px; height:100px; 
background-color:red; z-index:2; filter:alpha(opacity=25); -moz-opacity:0.25;}
#red2 {position:absolute; left:250px; top:150px; width:100px; height:100px; 
background-color:red; z-index:2; filter:alpha(opacity=75); -moz-opacity:0.75;}
#green1 {position:absolute; left:175px; top:195px; width:100px; height:100px; 
background-color:green; z-index:1; filter:alpha(opacity=100); -moz-opacity:1.0;}
<div id="red1"></div>
<div id="red2"></div>
<div id="green1"></div>


Internet Explorer 5+: filter:alpha(opacity=100);

To adjust the level of opacity in IE5 you simply change the value from 100 (opaque) to anything below that, 0 being completely transparent.

Netscape 6: -moz-opacity:1.0;

As with IE5+, NS6+ only requires you to change the 100% setting to something lower than that. Netscape is new to supporting opacity, and to be honest I have found this technique to be slightly 'buggy'. Support for this technique is greatly improved with NS6.1, so I would recommend this version. If you have any problems let me know.

Updated 2020 : note that the above examples are now out-of-date, given this post was originally published in 2001. Now, you can simply use the opacity setting in CSS to get the same results, regardless of browser, e.g. to get 50% opacity use the following CSS:

opacity: 0.5;