Note: this post is about a block on this website that no longer exists, however the CSS opacity information is still relevant.

The box on the right of this site that says “I pwn” has opacity applied to it so the background color blends nicely with the green background image of the wrapper div. Opacity is a CSS 3 property, and one that I tend to forget about, but if used properly, it pwns.

Here is what the W3C has to say. To apply opacity, you chose a value between 0 and 1, (1 being fully visible/opaque and 0 being fully transparent) and set up your property like this:

div#supp-content div#block-block-2 {
opacity: 0.5;
}

Simple. But what happens when you want to go crazy and support opacity in Internet Explorer? It can be done, but you’re going to have to use some other properties. Quirksmode summarizes this nicely. What they are telling you to do is put in these two properties, in this order, to get opacity working for IE 5-8: (just leave in the standard CSS3 property to get it working in modern browsers, none of these conflict)

div#supp-content div#block-block-2 {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);		
opacity: 0.5;
}

What they have left out is that in order for an element to receive opacity in IE, it must have layout. My classic way of applying layout to an element is to apply the property

div#supp-content div#block-block-2 {
Zoom:1;
}

which is only read by IE browsers. “hasLayout” is a whole bookshelf of articles explaining why IE does what it does, and ways to make it do what you want it to do. After I read this document, which I really need to, I hope to know more. But for now, at least we have opacity working.