Easy CSS Cross Browser Opacity

in CSS by Sarfaraz — August 30, 2010 at 9:49 pm | 1 comment

If you’ve ever found yourself in the position of needing to place a semi-transparent image or layer on a web page, you’ve probably ended up reading various arcane methods involving 24-bit PNG graphics and proprietary IE AlphaImageLoader expressions. Luckily, there is an easier way; albeit at the expense of valid CSS.
Browser-specific properties

Due to the way different browsers have implemented transparency, there are three different CSS properties that can affect the transparency of an element:

.transparent_class {
/* IE 8 */
background:#000;
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;

/* IE 5-7 */

filter: alpha(opacity=50);

/* Netscape */
-moz-opacity: 0.5;

/* Safari 1.x */
-khtml-opacity: 0.5;

/* Good browsers */
opacity: 0.5;
}

Tags: Cross Browser, CSS, featured, Opacity