Overlapping semi-transparent divs without alpha adding up?

Question

Is there a way to have semi-transparent elements (divs) overlap, and have the overlapped area NOT add up the 2 alpha values...ie make a seamless overlap? So if div 1 and div 2 have 0.5 alpha, the area where they overlap would still have 0.5 alpha, and NOT 0.75 alpha.

Javascript?

I have seen sort of similar questions pop up, but never quite an answer that settles the score...

Maybe a certain hack would be possible, like preventing the browser from displaying any other level of transparency than say 0.5?

That would allow to make really nice designs on websites!

Answer 1

You could display a third, opaque div under the second but above the first to cancel out the first div's transparency. It would have the same BG color as the parent of both divs.