Cross-browser transparency

Posted by on Jun 14, 2010 in CSS | 1 comment

How to do it? You can make any element transparent by using “opacity” property and a value the only thing is, this declration is treated totally differently in all browsers. With four separate declrations, you can cover all browsers and fortunately they don’t interfere with each other. In this example I’ve used 70% transparency:

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

Here is what each of these properties is for:

-moz-opacity: 0.7;
This one is used to support old versions of the Mozilla browsers like Netscape.

opacity: 0.7;
This is the current standard in CSS. It works for all browsers supportting current standards such as most versions of Firefox, Safari, and Opera.

-khtml-opacity: 0.7;
This is for very old versions of Safari (1.x).

filter:alpha(opacity=70);
And you need this one for our dear stupid IE.

One Response to “Cross-browser transparency”

  1. very nice article. thanks for posting this.