Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

Revision 47030 of opacity

  • Revision slug: CSS/opacity
  • Revision title: opacity
  • Revision id: 47030
  • Created:
  • Creator: j.j.
  • Is current revision? No
  • Comment 10 words added

Revision Content

{{ CSSRef() }}

Summary

opacity 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() }}:

Syntax

opacity: {{ Xref_cssnumber() }} | inherit ;

Values

0 (or less)
The element is fully transparent (invisible)
0 < number < 1
The element is translucent (background can be seen)
1 (or more)
The element is fully opaque (solid)

Examples

hbox.example {
  opacity: 0.5; /* see the background through the hbox */
}

Notes

-moz-opacity  is obsolete since Firefox 0.9 (2004). Don't use it any more!
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.
Firefox 3.1 dropped support for -moz-opacity finally.

Specifications

Browser compatibility

Browser Lowest Version
Internet Explorer n/a
4.0 supports filter:alpha(opacity=xx)
Firefox 0.9
Opera 9.0
Safari 1.2

Cross browser compatible example:

div.transp { /* make the div translucent */
   opacity: 0.5;
   filter: alpha(opacity=50);
   zoom: 1;     /* or set width or height to trigger "hasLayout" in IE 6-7 */ 
}

See also

uncomment as required (replace property) {{ cssxref|property }} {{ mediawiki.internal('Category:NeedsContent', "en") }} {{ mediawiki.internal('Category:NeedsAttention', "en") }} {{ mediawiki.internal('Category:NeedsExample', "en") }} {{ mediawiki.internal('Category:NeedsImageCleanup', "en") }} {{ mediawiki.internal('Category:NeedsMarkupWork', "en") }} {{ mediawiki.internal('Category:NeedsRewrite', "en") }} {{ mediawiki.internal('Category:NeedsTechnicalReview', "en") }} {{ mediawiki.internal('Category:NeedsEditorialReview', "en") }} {{ mediawiki.internal('Category:NeedsUpdate', "en") }} filter Property, Internet Explorer

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

Revision Source

<p>{{ CSSRef() }}</p>
<h3 name="Summary">Summary</h3>
<p><code>opacity</code> 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() }}:</li>
</ul>
<h3 name="Syntax">Syntax</h3>
<pre class="eval">opacity: {{ Xref_cssnumber() }} | inherit ;
</pre>
<h3 name="Values">Values</h3>
<dl><dt> 0 (or less)</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 (or more)</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>
<h3 name="Notes">Notes</h3>
<p><strong><em><code>-moz-opacity</code></em></strong><em>  is obsolete since Firefox 0.9 (2004). Don't use it any more!</em><br>
History:<br>
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>. <br>
Firefox 3.1 dropped support for <code>-moz-opacity</code> finally.</p>
<h3 name="Specifications">Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/css3-color/#transparency">css3-color</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></td> </tr> <tr> <td>Firefox</td> <td>0.9</td> </tr> <tr> <td>Opera</td> <td>9.0</td> </tr> <tr> <td>Safari</td> <td>1.2</td> </tr> </tbody>
</table>
<p>Cross browser compatible example:</p>
<pre class="eval">div.transp { /* make the div translucent */
   opacity: 0.5;
   filter: alpha(opacity=50);
   zoom: 1;     /* or set width or height to trigger "hasLayout" in IE 6-7 */ 
}</pre>
<h3 name="See_also">See also</h3>
<p><span class="comment">uncomment as required (replace property) {{ cssxref|property }} {{ mediawiki.internal('Category:NeedsContent', "en") }} {{ mediawiki.internal('Category:NeedsAttention', "en") }} {{ mediawiki.internal('Category:NeedsExample', "en") }} {{ mediawiki.internal('Category:NeedsImageCleanup', "en") }} {{ mediawiki.internal('Category:NeedsMarkupWork', "en") }} {{ mediawiki.internal('Category:NeedsRewrite', "en") }} {{ mediawiki.internal('Category:NeedsTechnicalReview', "en") }} {{ mediawiki.internal('Category:NeedsEditorialReview', "en") }} {{ mediawiki.internal('Category:NeedsUpdate', "en") }}</span> <a class="external" href="http://msdn2.microsoft.com/en-us/library/ms530752(VS.85).aspx">filter Property, Internet Explorer</a></p>
<p>{{ languages( { "fr": "fr/CSS/-moz-opacity", "pl": "pl/CSS/-moz-opacity" } ) }}</p>
Revert to this revision