Ghostly Compatibility: Cross Browser Transparancy with CSS
Posted: September 7th, 2009 | Author: Kurt | Filed under: Web Design | 13 Comments »
While CSS3 allows for a full range of effects (I’ve written some tips for CSS3 web and iPhone development), including transparency, the new selectors aren’t always compatible with a large variety of browsers. So, here’s a way to make text, sections, and images transparent with CSS.
To get around the lack of compatibility, I merely reproduce the same command in a variety of different ways. That way, if, for instance, the opacity command doesn’t work, the -moz-opacity selector might. Here’s a portion of the code snippet I used for the image above:
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
filter:alpha
filter:alpha is compatible with Internet Explorer, and accepts values ranging from 0 to 100. 0 is a fully transparent element, and 100 is a fully opaque element.
-moz-alpha
-moz-alpha is compatible with Firefox, and accepts ranges from 0.0 to 1.0, in increments of 0.1.
-khtml-opacity
-khtml-opacity is used in Apple’s Safari, and in other KHTML-enabled browsers. Again, the scale is from 0.0 to 1.0, ranging in increments of 0.1.
opacity
opacity is the standard CSS3 selector. Use this when you are sure that the client or audience will be using a modern and standards-compliant browser.
Good luck making transparent images in your next web design. If you find these tips helpful, you should follow me on Twitter or subscribe to the RSS feed.

Ghostly Compatibility: Cross Browser Transparancy with CSS…
While CSS3 allows for a full range of effects, including transparency, the new selectors aren’t always compatible with a large variety of browsers. So, here’s a way to make text, sections, and images transparent with CSS….
In your markup you use -moz-opacity:0.5; but in the comments after, you refer to it as -moz-alpha.
Which is correct?
beautiful trick
thanks for sharing
@Russell,
-moz-opacity is.
[...] Ghostly Compatibility: Cross Browser Transparancy with CSS – Cherrysavecherrysave.com [...]
[...] Ghostly Compatibility: Cross Browser Transparancy with CSS – Cherrysave [...]
[...] Streets: Google Launching Online Version of Monopoly 12 brilliant 404 pages Blog Econsultancy Ghostly Compatibility: Cross Browser Transparancy with CSS – Cherry Twitter-Tools fr den Profi Tools, Twitter Dr. Web Magazin Hibernate Tutorial Geek & Mild by [...]
Good option.
I prefer with jQuery, when it’s possible.
$(”.transparent_class”).css({’opacity’:'0.5′});
Ah, I didn’t think about doing it with JQuery. Thanks for the tip, Thiago.
Why use jQuery though when CSS is available, and CSS is the presentation layer?
.transparent_class {
/* IE 8 */
-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;
}
[...] Beautiful Free Charts For Excel & Powerpoint. WP-Cache – Instalación en 7 pasos. Ghostly Compatibility: Cross Browser Transparancy with CSS. Mozy y la escala de almacenamiento digital. Escuela 2.0: la herramienta debería ser lo de menos. [...]
IE8 accept also
-ms-filter:alpha(opacity=70);