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 achieve 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; Transparency on old versions of the Mozilla browser. For example: Netscape Navigator.
- -khtml-opacity: 0.7; To add transparency on old versions of Safari
- opacity: 0.7; The current CSS standard, supports transparency with all recent versions of Firefox, Opera and Safari.