CSS Transparency for Firefox IE Safari and Opera

Transparency or CSS Opacity in Firefox, Internet Explorer (IE), Safari and Opera. In the following simple solution, I show you how to set Transparency or Opacity for an element and have it render correctly in all popular browsers. In order to acheive this, we need to use  four different CSS statements.  Each statement can be individually adjusted to fine tune the transparency results for different browsers.

Note: With most browsers, in order to get CSS opacity to stick, you need to have some sort of placement specified. For example I used: float:none;

How to set transparency for all browsers

The following example shows how to apply a 70% transparency to a CSS Class:

.some_class {
float:none;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}

And here is a 70% transparency example using opacity on a CSS ID:

#some_id {
float:none;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}

What are each of these CSS Opacity property is used for?

  • filter:alpha(opacity=70); Used for Transparency in Internet Explorer (IE).
  • -moz-opacity:0.7; Used for Transparency on old versions of the Mozilla browser. For example: Netscape Navigator.
  • -khtml-opacity: 0.7; Used for Transparency on old versions of Safari
  • opacity: 0.7; The current CSS standard, Supports Transparency with all recent versions of Firefox, Opera and Safari.