mozilla

Revision 47039 of opacity

  • Revision slug: CSS/opacity
  • Revision title: opacity
  • Revision id: 47039
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment no wording changes

Revision Content

{{ CSSRef() }}

Summary

The opacity CSS property specifies the transparency of an element, i.e. how well you can see through an element.

  • {{ Xref_cssinitial() }}: 1 (opaque)
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Percentages: n/a
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

opacity:  <number> | inherit

Values

<number>
A {{ Xref_cssnumber() }} in the range 0.0 to 1.0. Any value smaller or larger will be clamped to this range.
0
The element is fully transparent (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 */
}

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.

Note: Firefox 3.5 and later do not support -moz-opacity.  By now, you should be using simply opacity.

Specifications

Browser compatibility

Browser Lowest Version
Internet Explorer n/a
4.0 supports filter: alpha(opacity=xx)
8.0 supports filter: "alpha(opacity=xx)" | -ms-filter: "alpha(opacity=xx)"
Firefox (Gecko) 1.0 (1.7)
Opera 9.0
Safari (Webkit) 1.2 (125)

Cross browser compatible example:

div.transp { /* make the div translucent */
   opacity: 0.6;                /* Firefox, Safari(WebKit), Opera)
   filter: "alpha(opacity=60)"; /* IE 8 */
   filter: alpha(opacity=60);   /* IE 4-7 */
   zoom: 1;                     /* needed in IE up to version 7, or set width or height to trigger "hasLayout" */ 
}

See also

Internet Explorer: Microsoft's filter:alpha(opacity=xx)

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

Revision Source

<p>{{ CSSRef() }}</p>
<h3 name="Summary">Summary</h3>
<p>The<code> opacity </code>CSS property specifies the transparency of an element, i.e. how well you can see through an element.</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() }}: as specified</li>
</ul>
<h3 name="Syntax">Syntax</h3>
<pre class="eval">opacity:  &lt;number&gt; | inherit
</pre>
<h3 name="Values">Values</h3>
<dl><dt>&lt;number&gt;</dt><dd> A {{ Xref_cssnumber() }} in the range<code> 0.0 </code>to<code> 1.0</code>. Any value smaller or larger will be clamped to this range.</dd><dt>0</dt><dd>The element is fully transparent (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 name="Examples">Examples</h3>
<pre class="eval">hbox.example {
  opacity: 0.5; /* see the background through the hbox */
}
</pre>
<h4>History</h4>
<p>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>.</p>
<div class="note"><strong>Note: </strong>Firefox 3.5 and later do not support <code>-moz-opacity</code>.  By now, you should be using simply <code>opacity</code>.</div>
<h3 name="Specifications">Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/css3-color/#transparency">CSS3 Color #opacity</a></li>
</ul>
<h3 name="Browser_compatibility">Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> </tr> <tr> <td>Internet Explorer</td> <td>n/a <br> 4.0 supports<code> filter: alpha(opacity=xx)</code><br> 8.0 supports<code> filter: <span style="color: rgb(255, 0, 0);">"</span>alpha(opacity=xx)<span style="color: rgb(255, 0, 0);">"</span> | -ms-filter: <span style="color: rgb(255, 0, 0);">"</span>alpha(opacity=xx)<span style="color: rgb(255, 0, 0);">"</span></code></td> </tr> <tr> <td>Firefox (Gecko)</td> <td><strong>1.0 </strong>(1.7)</td> </tr> <tr> <td>Opera</td> <td><strong>9.0</strong></td> </tr> <tr> <td>Safari (Webkit)</td> <td><strong>1.2</strong> (125)</td> </tr> </tbody>
</table>
<p>Cross browser compatible example:</p>
<pre class="eval">div.transp { /* make the div translucent */
   opacity: 0.6;                /* Firefox, Safari(WebKit), Opera)
   filter: "alpha(opacity=60)"; /* IE 8 */
   filter: alpha(opacity=60);   /* IE 4-7 */
   zoom: 1;                     /* needed in IE up to version 7, or set width or height to trigger "hasLayout" */ 
}
</pre><h3 name="See_also">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">Internet Explorer: Microsoft's filter:alpha(opacity=xx)</a></p>
<p>{{ languages( { "fr": "fr/CSS/-moz-opacity", "pl": "pl/CSS/-moz-opacity" } ) }}</p>
Revert to this revision