color: rgba(0,0,255,0.5)

opacity: .5;
	filter: alpha(opacity=50);

-moz-opacity: .5;

body {background: #000;}

.opaque {
width: 200px;
height: 100px;
border: 1px solid #ffcf00;
background: url(75p_white.png);
}

/* or put in a conditional comment */
* html .opaque {
background: transparent;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='75p_white.png');
}

.opaque a {position: relative; z-index: 100;}
a {color: #f00;}
a:hover {color: #00f; text-decoration: none;}

quote:

ORIGINAL: Suzy.

Opera does not support it.. you're correct

It does however support variable opacity .pngs. Which you knew so the only thing I can suggest it to use one of them and then use a filter for IE inside a conditional comment ( or some other IE workaround ) to achieve the same effect for it.



See this link for more There is also a problem with links inside a div done this way with IE/Win but the problem can be solved by changing the size of the image, that article says, but when I tested it with the image from this page it didn't work for me in IE6 even with the 2x10 image.

However I changed the z-index of the links within a div and it then seemed to work fine. I didn't check different sized pngs so suggest if you use it you try both workarounds?

If you copy the 75p_white.png from that page {background of top two divs} works with this test code:

body {background: #000;}

.opaque {
width: 200px;
height: 100px;
border: 1px solid #ffcf00;
background: url(75p_white.png);
}

/* or put in a conditional comment */
* html .opaque {
background: transparent;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='75p_white.png');
}

.opaque a {position: relative; z-index: 100;}
a {color: #f00;}
a:hover {color: #00f; text-decoration: none;}

HTML: <div class="opaque"><a href="#">test link</a></div>

You probably saw all this too in your searching, but I thought I'd put it here just in case..