Revision 47066 of opacity

  • Revision slug: CSS/opacity
  • Revision title: opacity
  • Revision id: 47066
  • Created:
  • Creator: myakura
  • Is current revision? No
  • Comment 1 words added

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.

  • {{ Xref_cssinitial() }}: 1 (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 are clamped to this range.

0
The element is fully transparent (that is, invisible).
0 < number < 1
The element is translucent (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;                    /* Firefox, Safari and Chrome (WebKit), Opera */
   filter: alpha(opacity=20);       /* IE */
   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;                    /* Firefox, Safari and Chrome (WebKit), Opera */
   filter: alpha(opacity=50);       /* IE */
   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;                    /* Firefox, Safari and Chrome (WebKit), Opera */
   filter: alpha(opacity=80);       /* IE */
   zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */ 
}

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

Browser Lowest version Support of
Internet Explorer
4.0 filter: alpha(opacity=xx)
8.0
(both are synonymous)
filter: alpha(opacity=xx)
filter: "alpha(opacity=xx)"
Firefox (Gecko) 0.9 (1.7) opacity
Opera 9.0 opacity
Safari | Chrome | WebKit 1.2 | 1.0 | 125 opacity

Browser compatibility

{{ CompatibilityTable() }}

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

(both are synonymous)
9.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
  • Unlike the other browsers, IE does not use opacity, rather it uses 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 -ms- 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

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

See also

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

{{ HTML5ArticleTOC() }}

{{ languages( { "de": "de/CSS/opacity", "fr": "fr/CSS/-moz-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>
<ul> <li>{{ Xref_cssinitial() }}: 1 (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 are clamped to this range.</p>
<dl> <dt>0</dt> <dd>The element is fully transparent (that is, invisible).</dd> <dt>0 &lt; <em>number </em>&lt; 1</dt> <dd>The element is translucent (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>
<h5>Cross Browser compatible Live Example</h5>
<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;                    /* Firefox, Safari and Chrome (WebKit), Opera */
   filter: alpha(opacity=20);       /* IE */
   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;                    /* Firefox, Safari and Chrome (WebKit), Opera */
   filter: alpha(opacity=50);       /* IE */
   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;                    /* Firefox, Safari and Chrome (WebKit), Opera */
   filter: alpha(opacity=80);       /* IE */
   zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */ 
}</pre>
<h3>Notes</h3>
<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> <p>Gecko 1.9.1 (Firefox 3.5) and later do not support<code> -moz-opacity</code>.  By now, you should be using simply<code> opacity</code>.</p> </li>
</ul>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest version</th> <th colspan="2">Support of</th> </tr> <tr> <td rowspan="3">Internet Explorer</td> </tr> <tr> <td>4.0</td> <td><code>filter: alpha(opacity=xx)</code></td> </tr> <tr> <td>8.0<br> (both are synonymous)</td> <td><code>filter: alpha(opacity=xx)<br> filter: "alpha(opacity=xx)"</code></td> </tr> <tr> <td>Firefox (Gecko)</td> <td><strong>0.9 </strong>(1.7)</td> <td colspan="2"><code>opacity</code></td> </tr> <tr> <td>Opera</td> <td><strong>9.0</strong></td> <td colspan="2"><code>opacity</code></td> </tr> <tr> <td>Safari | Chrome | WebKit</td> <td><strong>1.2</strong> | 1.0 | 125</td> <td colspan="2"><code>opacity</code></td> </tr> </tbody>
</table>
<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">0.9 (1.7)</td> <td>4.0<br> <code>filter: alpha(opacity=xx)</code></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>9.0</td> </tr> </tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody>
</table>
</div>
<ul> <li>Unlike the other browsers, IE does not use <code>opacity</code>, rather it uses <code>filter</code> instead. </li> <li>IE supports also the extended form<code> progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)</code>. This is needless, so don't use it.</li> <li>IE8 introduced<code> -ms-filter</code>, which is synonymous with<code> filter</code>.  Don't use the<code> -ms- </code>prefix.</li> <li> <p>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.<br> Don't use<code> -khtml-opacity </code>nor<code> -moz-opacity </code>anymore.</p> </li>
</ul><h3>Specifications</h3>
<ul> <li>{{ spec("http://www.w3.org/TR/css3-color/#transparency","CSS 3 Color: opacity", "PR") }}</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/-moz-opacity", "pl": "pl/CSS/-moz-opacity" } ) }}</p>
Revert to this revision