mozilla

Revision 47055 of opacity

  • Revision slug: CSS/opacity
  • Revision title: opacity
  • Revision id: 47055
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment minor browser compat addition; 49 words added, 2 words removed

Revision Content

{{ CSSRef() }}

Summary

The opacity CSS property specifies the transparency of an element, i.e. 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 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 */
}
Cross Browser compatible Live Example
pre {                               /* make the box translucent (20% opaque) */
   border: solid red;
   opacity: 0.2;                    /* Firefox, Safari(WebKit), Opera */
   -ms-filter: "alpha(opacity=20)"; /* IE 8 */
   filter: alpha(opacity=20);       /* IE 4-7 */
   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(WebKit), Opera */
   -ms-filter: "alpha(opacity=50)"; /* IE 8 */
   filter: alpha(opacity=50);       /* IE 4-7 */
   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(WebKit), Opera */
   -ms-filter: "alpha(opacity=80)"; /* IE 8 */
   filter: alpha(opacity=80);       /* IE 4-7 */
   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.

Specifications

Browser compatibility

Browser Lowest Version Support of
Internet Explorer
4.0 filter: alpha(opacity=xx)
8.0
(both are synonymous)
filter: "alpha(opacity=xx)"
-ms-filter: "alpha(opacity=xx)"
Firefox (Gecko) 0.9 (1.7) opacity
Opera 9.0 opacity
Safari (WebKit) 1.2 (125) opacity
  • IE supports also the extended form progid:DXImageTransform.Microsoft.Alpha(Opacity=xx). This is needless, so don't use it.
  • Similar to -moz-opacity, -khtml-opacity is dead as well since early 2004 (release of Safari 1.2). Konqueror had never support for -khtml-opacity and knows plain opacity since version 4.0. Don't use this properties anymore.

See also

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

{{ languages( { "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, i.e. 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 will be clamped to this range.</p>
<dl> <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>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; -ms-filter:'alpha(opacity=20)'; filter:alpha(opacity=20); zoom:1">pre {                               /* make the box translucent (20% opaque) */
   border: solid red;
   opacity: 0.2;                    /* Firefox, Safari(WebKit), Opera */
   -ms-filter: "alpha(opacity=20)"; /* IE 8 */
   filter: alpha(opacity=20);       /* IE 4-7 */
   zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */ 
}</pre>
<pre style="border:solid red; opacity:0.5; -ms-filter:'alpha(opacity=50)'; filter:alpha(opacity=50); zoom:1">pre {                               /* make the box translucent (50% opaque) */
   border: solid red;
   opacity: 0.5;                    /* Firefox, Safari(WebKit), Opera */
   -ms-filter: "alpha(opacity=50)"; /* IE 8 */
   filter: alpha(opacity=50);       /* IE 4-7 */
   zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */ 
}</pre>
<pre style="border:solid red; opacity:0.8; -ms-filter:'alpha(opacity=80)'; filter:alpha(opacity=80); zoom:1">pre {                               /* make the box translucent (80% opaque) */
   border: solid red;
   opacity: 0.8;                    /* Firefox, Safari(WebKit), Opera */
   -ms-filter: "alpha(opacity=80)"; /* IE 8 */
   filter: alpha(opacity=80);       /* IE 4-7 */
   zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */ 
}</pre>
<h3>Notes</h3>
<ul> <li> <h5>History</h5> 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> <div class="note">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>.</div> </li>
</ul>
<h3>Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/css3-color/#transparency">CSS3 Color #opacity</a> Working draft</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: <span style="color: rgb(255, 0, 0);">"</span>alpha(opacity=xx)<span style="color: rgb(255, 0, 0);">"</span><br> -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>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 (WebKit)</td> <td><strong>1.2</strong> (125)</td> <td colspan="2"><code>opacity</code></td> </tr> </tbody>
</table>
<ul> <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>Similar to<code> -moz-opacity</code>,<code> -khtml-opacity </code>is dead as well since early 2004 (release of Safari 1.2). Konqueror had never support for <code>-khtml-opacity </code>and knows plain<code> opacity </code>since version 4.0. Don't use this properties anymore.</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>{{ languages( { "fr": "fr/CSS/-moz-opacity", "pl": "pl/CSS/-moz-opacity" } ) }}</p>
Revert to this revision