opacity

How to set the opacity of an element.

Example

Test paragraph without opacity.

Test paragraph with opacity

Style sheet:

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

.opaque1 {
	opacity: .5;
}

Old IEs

IE before version 9 needed Microsoft-specific syntax:

Test paragraph with filter

Test paragraph with -ms-filter

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

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

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.