opacity property CSS Reference



Definition and Usage

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

The value applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, an element and its contained children all have the same opacity relative to the element's background, even if the element and its children have different opacities relative to one another.

Using this property with a value different than 1 places the element in a new stacking context.

  • Initial 1.0
  • Applies to all elements
  • Inherited no
  • Media visual
  • Computed Value the specified value, clipped in the range [0,1]
  • Animatable yes, as a number
  • Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

Formal syntax: <number>
opacity: 1
opacity: 1.0
opacity: 0.6
opacity: 0.0
opacity: 0
opacity: inherit

Values

<number>
Is a <number> in the range 0.0 to 1.0, both included, representing the opacity of the channel, that is the value of its alpha channel. Any value outside the interval, though valid, is clamped to the nearest limit in the range.
Value Meaning
0 The element is fully transparent (that is, invisible).
Any <number> strictly 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 */
}

Live Example

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 */ 
}

Different opacity with :hover

<!doctype html>
<html>
<head>
<style>
img.opacity {
opacity: 1;
filter: alpha(opacity=100);
zoom: 1;
}
img.opacity:hover {
opacity: 0.5;
filter: alpha(opacity=50);
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>

Compatibility

Desktop browsers

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.7 or earlier) 9.0 9.0 1.2 (125)
8.0
filter: alpha(opacity=xx)
filter: "alpha(opacity=xx)"

(both are synonymous)
4.0
filter: alpha(opacity=xx)

Mobile browsers

Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1.7) 9.0 9.0 3.2
8.0
filter: alpha(opacity=xx)
filter: "alpha(opacity=xx)"

(both are synonymous)
4.0
filter: alpha(opacity=xx)

Relative articles