opacity

  • Revision slug: CSS/opacity
  • Revision title: opacity
  • Revision id: 293348
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

Summary

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

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

  • {{ Xref_cssinitial() }}: 1.0 (opaque)
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: the specified number (clipped to the range [0.0, 1.0])

Syntax

opacity:  <alphavalue>

Values

<alphavalue>
Is a {{ Xref_cssnumber() }} 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 {{ xref_cssnumber() }} 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 */
}

Cross Browser compatible 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

<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>

Specifications

Specification Status Comment
{{ SpecName('CSS3 Transitions', '#animatable-css', 'opacity') }} {{ Spec2('CSS3 Transitions') }} Defines opacity as animatable.
{{ SpecName('CSS3 Color', '#opacity', 'opacity') }} {{ Spec2('CSS3 Color') }} Initial defination

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 {{ CompatGeckoDesktop("1.7") }} 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)
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 {{ CompatGeckoMobile("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)
  • 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 and support for MozOpacity in javascript was removed in Gecko 13.  By now, you should be using simply opacity.
  • Prior to version 9, Internet Explorer does not support opacity, rather it supports filter instead.
  • IE4 to IE9 supported the extended form progid:DXImageTransform.Microsoft.Alpha(Opacity=xx).
  • IE8 introduced -ms-filter, which is synonymous with filter. Both are gone in IE10
  • 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.

See also

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>opacity</code> CSS property specifies the transparency of an element, that is, the degree to which the background behind the element is overlaid.</p>
<p>Using this property with a value different than <code>1</code> places the element in a new <a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">stacking context</a>.</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}:</dfn> <code>1.0</code> (opaque)</li>
  <li><dfn>Applies to:</dfn> all elements</li>
  <li><dfn>{{ Xref_cssinherited() }}:</dfn> no</li>
  <li><dfn>Media:</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}:</dfn> the specified number (clipped to the range [<code>0.0</code>, <code>1.0</code>])</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre>
opacity:  &lt;alphavalue&gt;</pre>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    <code>&lt;alphavalue&gt;</code></dt>
  <dd>
    Is a {{ Xref_cssnumber() }} in the range <code>0.0</code> to <code>1.0</code>, 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.
    <table class="standard-table">
      <tbody>
        <tr>
          <th>Value</th>
          <th>Meaning</th>
        </tr>
        <tr>
          <td><code>0</code></td>
          <td>The element is fully transparent (that is, invisible).</td>
        </tr>
        <tr>
          <td>Any {{ xref_cssnumber() }} strictly between <code>0</code> and <code>1</code></td>
          <td>The element is translucent (that is, background can be seen).</td>
        </tr>
        <tr>
          <td><code>1</code></td>
          <td>The element is fully opaque (solid).</td>
        </tr>
      </tbody>
    </table>
  </dd>
</dl>
<h2 id="Examples">Examples</h2>
<pre class="brush: css">
hbox.example {
  opacity: 0.5; /* see the background through the hbox */
}</pre>
<h3 id="Cross_Browser_compatible_Live_Example">Cross Browser compatible Live Example</h3>
<pre style="border:solid red; opacity:0.2; filter:alpha(opacity=20); zoom:1">
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>
<pre style="border:solid red; opacity:0.5; filter:alpha(opacity=50); zoom:1">
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>
<pre style="border:solid red; opacity:0.8; filter:alpha(opacity=80); zoom:1">
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 */ 
}</pre>
<h3 id="Different_opacity_with_.3Ahover">Different opacity with :hover</h3>
<pre class="brush: html">
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
img.opacity {
   opacity: 1;
   filter: alpha(opacity=50);
   zoom:&nbsp;1;
&nbsp;}  
 
img.opacity:hover {
   opacity: 0.5;
   filter: alpha(opacity=100);
   zoom:&nbsp;1;
&nbsp;}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;img src="//developer.mozilla.org/media/img/mdn-logo.png" alt="MDN logo" width="128" height="146" class="opacity" /&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'opacity') }}</td>
      <td>{{ Spec2('CSS3 Transitions') }}</td>
      <td>Defines <code>opacity</code> as animatable.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS3 Color', '#opacity', 'opacity') }}</td>
      <td>{{ Spec2('CSS3 Color') }}</td>
      <td>Initial defination</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td rowspan="3">Basic support</td>
        <td rowspan="3">1.0</td>
        <td rowspan="3">{{ CompatGeckoDesktop("1.7") }}</td>
        <td>9.0</td>
        <td rowspan="3">9.0</td>
        <td rowspan="3">1.2 (125)</td>
      </tr>
      <tr>
        <td>8.0<br />
          <code>filter: alpha(opacity=xx)<br />
          filter: "alpha(opacity=xx)" </code><br />
          (both are synonymous)</td>
      </tr>
      <tr>
        <td>4.0<br />
          <code>filter: alpha(opacity=xx)</code></td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table" style="width: 827px; height: 156px;">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td rowspan="3">Basic support</td>
        <td rowspan="3">1.0</td>
        <td rowspan="3">{{ CompatGeckoMobile("1.7") }}</td>
        <td>9.0</td>
        <td rowspan="3">9.0</td>
        <td rowspan="3">3.2</td>
      </tr>
      <tr>
        <td>8.0<br />
          <code>filter: alpha(opacity=xx)<br />
          filter: "alpha(opacity=xx)" </code><br />
          (both are synonymous)</td>
      </tr>
      <tr>
        <td>4.0<br />
          <code>filter: alpha(opacity=xx)</code></td>
      </tr>
    </tbody>
  </table>
</div>
<ul>
  <li><strong>History:</strong>&nbsp; Prior to Mozilla 1.7 (Firefox 0.9) the<code> -moz-opacity </code>property was implemented in a non-standard (inherited) way. With Firefox 0.9 the behavior changed and the property was renamed to<code> opacity</code>.&nbsp; Since then<code> -moz-opacity </code>was supported just as an alias for<code> opacity</code>.</li>
  <li>Gecko 1.9.1 (Firefox 3.5) and later do not support<code> -moz-opacity</code> and support for <code>MozOpacity</code> in javascript was <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=730532" title="https://bugzilla.mozilla.org/show_bug.cgi?id=730532">removed</a> in Gecko 13. &nbsp;By now, you should be using simply<code> opacity</code>.</li>
  <li>Prior to version 9, Internet Explorer does not support <code>opacity</code>, rather it supports <code>filter</code> instead.</li>
  <li>IE4 to IE9 supported the extended form <code>progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)</code>.</li>
  <li>IE8 introduced <code>-ms-filter</code>, which is synonymous with <code>filter</code>. Both are gone in IE10</li>
  <li>Similar to <code>-moz-opacity</code>, <code>-khtml-opacity</code> has been dead since early 2004 (release of Safari 1.2).<br />
    Konqueror never had support for <code>-khtml-opacity</code> and had been supporting <code>opacity</code> since version 4.0.</li>
</ul>
<h2 id="See_also">See also</h2>
<ul>
  <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms532910%28VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms532910(VS.85).aspx">MSDN Microsoft's filter:alpha(opacity=xx)</a></li>
</ul>
Revert to this revision