Advanced Search

Return to Snippet

Revision: 4315
at November 25, 2007 17:24 by j_junyent
Initial Code 
.transparent_class {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}
Initial URL 
http://css-tricks.com/css-transparency-settings-for-all-broswers/
Initial Description 
Transparency is one of those weird things that is treated completely differently in all browsers. To cover all your bases, you need four separate CSS statements. Fortunately they don’t interfere with each other really, so using them all every time you wish to add transparency is no big hassle and worry-free. Here they are, and are currently set to 50% transparency:
    * opacity: 0.5; This is the “most important” one because it is the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. This would be all you need if all browsers supported current standards. Which, of course, they don’t.
    * filter:alpha(opacity=50); This one you need for IE.
    * -moz-opacity:0.5; You need this one to support way old school versions of the Mozilla browsers like Netscape Navigator.
    * -khtml-opacity: 0.5; This is for way old versions of Safari (1.x) when the rendering engine it was using was still referred to as KTHML, as opposed to the current WebKit.
Initial Title 
Transparent in all  browsers
Initial Tags 

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
CSS