opacity

Back to the index.

This page has been translated into Russian and Vietnamese.

How to set the opacity of an element.

Example

Test paragraph without opacity.

Test paragraph with opacity

Test paragraph with filter

Test paragraph with -ms-filter

Style sheet:

.test {
	background-color: #6374AB;
	width: 100%;
	color: #ffffff;
}

.opaque1 {	// for all other browsers
	opacity: .5;
}

.opaque2 {	// for IE5-7
	filter: alpha(opacity=50);
}

.opaque3 {	// for IE8
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

IE compatibility note

If you want opacity to work in all IE versions, the order should be:

.opaque {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // first!
	filter: alpha(opacity=50);					// second!
}

If you don’t use this order, IE8-as-IE7 doesn’t apply the opacity, although IE8 and a pure IE7 do.