Summary

The opacity CSS property specifies the transparency of an element, that is, the degree to which the background behind the element is overlaid.

• Initial value : 1 (opaque)
• Applies to: all elements
• Inherited : no
• Percentages: n/a
• Media: visual
• Computed value : the specified number (clipped to the range [0.0, 1.0])

Syntax

opacity:  <number> | inherit

Values

A <number> in the range 0.0 to 1.0. Any value smaller or larger is clamped to this range.

0

The element is fully transparent (that is, invisible).

number between 0 and 1

The element is translucent (that is, background can be seen).

1

The element is fully opaque (solid).

Examples

hbox.example {
  opacity: 0.5; /* see the background through the hbox */
}

pre {                               /* make the box translucent (20% opaque) */
   border: solid red;
   opacity: 0.2;
   filter: alpha(opacity=20);       /* IE8 and lower */
   zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */ 
}

pre {                               /* make the box translucent (50% opaque) */
   border: solid red;
   opacity: 0.5;
   filter: alpha(opacity=50);       /* IE8 and lower */
   zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */ 
}

pre {                               /* make the box translucent (80% opaque) */
   border: solid red;
   opacity: 0.8;
   filter: alpha(opacity=80);       /* IE8 and lower */
   zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */ 
}

<html>
<head>
<style>
img.opacity {
   opacity: 1;
   filter: alpha(opacity=50);
   zoom: 1;
 }  
 
img.opacity:hover {
   opacity: 0.5;
   filter: alpha(opacity=100);
   zoom: 1;
 }
</style>
</head>

<body>
<img src="//developer.mozilla.org/media/img/mdn-logo.png" alt="MDN logo" width="128" height="146" class="opacity" />
</body>
</html>

Notes

• History:  Prior to Mozilla 1.7 (Firefox 0.9) the -moz-opacity property was implemented in a non-standard (inherited) way. With Firefox 0.9 the behavior changed and the property was renamed to opacity.  Since then -moz-opacity was supported just as an alias for opacity.

• Gecko 1.9.1 (Firefox 3.5) and later do not support -moz-opacity.  By now, you should be using simply opacity.

Browser compatibility

• Prior to version 9, Internet Explorer does not support opacity, rather it supports filter instead.
• IE supports also the extended form progid:DXImageTransform.Microsoft.Alpha(Opacity=xx). This is needless, so don't use it.
• IE8 introduced -ms-filter, which is synonymous with filter. Don't use the prefix.
• Similar to -moz-opacity, -khtml-opacity has been dead since early 2004 (release of Safari 1.2).
  Konqueror never had support for -khtml-opacity and had been supporting opacity since version 4.0.
  Don't use -khtml-opacity nor -moz-opacity anymore.

Specifications

• CSS 3 Color: opacityREC

See also

MSDN Microsoft's filter:alpha(opacity=xx)