There are various CSS opacity properties out there that allow us to adjust the transparency of an element on our websites, but the thing is amongst the various available properties, which ones apply for which browsers? There are several ways to adjust opacity for an element but each are browser specific.

The below are all of the same but, each work for a certain browser. Besides the last one which is the standard CSS opacity property.

/* Applies to IE5-7 */
filter:alpha(opacity=85);

/* Applies to IE8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* Applies to Mozilla and Firefox */
-moz-opacity:0.85;

/* Applies to Safari 1.1-1.3 */
-khtml-opacity: 0.85;

/* Standard CSS property */
opacity: 0.85;

Since current browsers do not adopt to the same standards, developers will use the numerous CSS properties to create an equal cross-browser opacity experience, by placing each of those properties within there CSS.

The opacity property is supported by Netscape 7.2+, Firefox, Safari 2+, Opera 9+. The values that this property can accept are: 0.0 – 1.0. The lower the value the more transparent the element is.

The filter:alpha(opacity) property can range anywhere from 0-100. And like the the property above, the lower the value the more transparent.

The -khtml-opacity property was built with Webkit and it is based on the KHTML engine and associated the -khtml prefix to the -opacity

The -moz-opacity property applies for older versions of Mozilla browsers.