opacity

  • Revision slug: CSS/opacity
  • Revision title: opacity
  • Revision id: 47022
  • Created:
  • Creator: Keepitmassive
  • Is current revision? No
  • Comment /* See also */

Revision Content

{{template.CSSMozExtensionRef()}}

Summary

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

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

This is a CSS 3 property, and it is new starting with Mozilla 1.7; prior to Mozilla 1.7 the -moz-opacity property could be used for a similar effect (-moz-opacity was implemented as an inherited property). The -moz-opacity property name is now an alias for {{template.Cssxref("opacity")}}, and while it will continue to exist as an alias, the old name is deprecated.

Syntax

opacity: {{template.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

Specifications

Browser compatibility

(Sample Compatibility Chart)

Browser Lowest Version
Internet Explorer 0
Firefox 0
Netscape 0
Opera 0
Safari ?


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

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

Revision Source

<p> 
{{template.CSSMozExtensionRef()}}
</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> {{template.Xref_cssinitial()}}: 1 (opaque)
</li><li> Applies to: all elements
</li><li> {{template.Xref_cssinherited()}}: no
</li><li> Percentages: n/a
</li><li> Media: {{template.Xref_cssvisual()}}
</li><li> {{template.Xref_csscomputed()}}: 
</li></ul>
<p>This is a CSS 3 property, and it is new starting with Mozilla 1.7; prior to Mozilla 1.7 the <code>-moz-opacity</code> property could be used for a similar effect (<code>-moz-opacity</code> was implemented as an inherited property).  The <code>-moz-opacity</code> property name is now an alias for {{template.Cssxref("opacity")}}, and while it will continue to exist as an alias, the old name is deprecated.
</p>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">opacity: {{template.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; <i>number</i> &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>
<h3 name="Specifications"> Specifications </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/css3-color/#transparency">CSS 3 color</a>
</li></ul>
<h3 name="Browser_compatibility"> Browser compatibility </h3>
<p>(Sample Compatibility Chart)
</p>
<table class="standard-table">
  <tbody><tr>
    <th>Browser</th>
    <th>Lowest Version</th>
  </tr>
  <tr>
    <td>Internet Explorer</td>
    <td>0</td>
  </tr>
  <tr>
    <td>Firefox</td>
    <td>0</td>
  </tr>
  <tr>
    <td>Netscape</td>
    <td>0</td>
  </tr>
  <tr>
    <td>Opera</td>
    <td>0</td>
  </tr>
  <tr>
    <td>Safari</td>
    <td>?</td>
  </tr>
</tbody></table>
<p><br>
</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://msdn2.microsoft.com/en-us/library/ms530752(VS.85).aspx">filter Property, Internet Explorer</a>
</p>{{ wiki.languages( { "fr": "fr/CSS/-moz-opacity", "pl": "pl/CSS/-moz-opacity" } ) }}
Revert to this revision