Back to the index.

This page has been translated into Russian.

How to set the opacity of an element.


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

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.