Picnic Website Code Tutorials

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 */
}
		

Need help adding this or other code to your website? Post it here in the forum! Forum

Sponsors

Top 5 Donators

Friends of Mine