Cross Browser Modern CSS Opacity With RGBA

View Demo

IE6/7/8 get fed the rgb background (and doesn't read the next rgba background), the opacity filter, and position relative on the inner elements. Modern browsers simply get fed the rgb(a) background. Walla - CSS Opacity that works in all browsers without the hacks. The end!

The html

<div id="box"> 
<p>Text</p>
</div>

The CSS

#box {
background:rgb(166,166,166); /* IE6/7/8 */
filter:alpha(opacity=70); /* IE6/7/8 */
background:rgba(166,166,166,0.7); /* Modern Browsers */
}
#box p {
position:relative; /* IE6/7/8 */
}

ADVERTISE HERE