mozilla

Revision 47034 of opacity

  • Revision slug: CSS/opacity
  • Revision title: opacity
  • Revision id: 47034
  • Created:
  • Creator: j.j.
  • Is current revision? No
  • Comment 3 words added, 8 words removed

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 deprecated since Firefox 0.9 and unsupported today. 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 (Gecko 1.9.1) dropped support for -moz-opacity finally.

Specifications

Browser compatibility

Browser Lowest Version
Internet Explorer n/a
4.0 supports   filter: alpha(opacity=xx)
(8.0 expected)   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.6;
   filter: "alpha(opacity=60)"; /* expected to work in 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

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") }} 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><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 deprecated since Firefox 0.9 and unsupported today. </em><strong><em>Don't use it any more!</em></strong><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 (Gecko 1.9.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 #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 expected)   <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.6;
   filter: "alpha(opacity=60)"; /* expected to work in 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>
<p> </p><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://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