Layers Part 2 Setting Layer Opacity

Controlling the opacity of a layer using visual filters.

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.

John Collins

I have been writing about web technology and software development since 2001. I am the developer of the Alpha Framework for PHP. I love open source, technology, and economics. You can follow updates from this blog on Twitter.

Working With PNG

Simulated Depth of Field