opacity

  • Revision slug: CSS/opacity
  • Revision title: opacity
  • Revision id: 235700
  • Created:
  • Creator: Huan
  • Is current revision? No
  • Comment MozOpacity alias gone in Firefox 13; 11 words added, 1 words removed

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
  • Percentages: n/a
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: the specified number (clipped to the range [0.0, 1.0])

Syntax

opacity:  <number> | inherit

Values

A {{ Xref_cssnumber() }} 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 */
}

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

  • {{ spec("http://www.w3.org/TR/css3-color/#transparency","CSS 3 Color: opacity", "REC") }}

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.
  • IE supports also the extended form progid:DXImageTransform.Microsoft.Alpha(Opacity=xx).
  • IE8 introduced -ms-filter, which is synonymous with filter.
  • 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

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

{{ HTML5ArticleTOC() }}

{{ languages( { "de": "de/CSS/opacity", "fr": "fr/CSS/opacity", "pl": "pl/CSS/-moz-opacity" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<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> <li>{{ Xref_cssinitial() }}: <code>1.0</code> (opaque)</li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Percentages: n/a</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: the specified number (clipped to the range [<code>0.0</code>, <code>1.0</code>])</li>
</ul>
<h3>Syntax</h3>
<pre>opacity:  &lt;number&gt; | inherit</pre>
<h3>Values</h3>
<p>A {{ Xref_cssnumber() }} in the range<code> 0.0 </code>to<code> 1.0</code>. Any value smaller or larger is clamped to this range.</p>
<dl> <dt>0</dt> <dd>The element is fully transparent (that is, invisible).</dd> <dt><em>number </em>between 0 and 1</dt> <dd>The element is translucent (that is, background can be seen).</dd> <dt>1</dt> <dd>The element is fully opaque (solid).</dd>
</dl>
<h3>Examples</h3>
<pre>hbox.example {
  opacity: 0.5; /* see the background through the hbox */
}</pre>
<h4>Cross Browser compatible Live Example</h4>
<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>
<h4>Different opacity with :hover</h4>
<pre class="brush: html">&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
img.opacity {
   opacity: 1;
   filter: alpha(opacity=50);
   zoom: 1;
 }  
 
img.opacity:hover {
   opacity: 0.5;
   filter: alpha(opacity=100);
   zoom: 1;
 }
&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>
<h3>Specifications</h3>
<ul> <li>{{ spec("http://www.w3.org/TR/css3-color/#transparency","CSS 3 Color: opacity", "REC") }}</li>
</ul>
<h3 name="Browser_Compatibility">Browser compatibility</h3>
<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>  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>.  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.  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>IE supports also 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>.</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>
<h3>See also</h3>
<p><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></p>
<p>{{ HTML5ArticleTOC() }}</p>
<p>{{ languages( { "de": "de/CSS/opacity", "fr": "fr/CSS/opacity", "pl": "pl/CSS/-moz-opacity" } ) }}</p>
Revert to this revision