Cross-Platform CSS for Translucent DIVs

Had a need recently (in 2011!) to make some translucent (semi-opaque) elements on a Web page. CSS3 supports an “alpha” channel, the “a” in rgba, to provide color opaqueness, but IE 7 and 8 do not support this attribute.  So, most web developers resort to using a translucent background-image.  However, there is a pure CSS way that is compatible with all modern browsers today (IE6 ignored, of course).  This takes advantage, though, of some CSS parsing bugs, so may not satisfy the CSS purists out there, but it works for me 🙂

Demo: solid background inner-box surrounded by a translucent box, overlaying a background-image.

Continue reading Cross-Platform CSS for Translucent DIVs