---
title: opacity
slug: Web/CSS/opacity
tags:
  - CSS
  - CSS Reference
  - CSS3
  - css3-color
translation_of: Web/CSS/opacity
---
<div>{{ CSSRef() }}</div>

<h2 id="Summary" name="Summary">Resumen</h2>

<p>La propiedad CSS <code>opacity</code> define la transparencia de un elemento, esto es, en qué grado se superpone el fondo al elemento.</p>

<p>Usar esta propiedad con un valor diferente a 1 situa al elemento en un nuevo <a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">contexto de apilamiento</a>.</p>

<p>{{cssinfo}}</p>

<h2 id="Syntax" name="Syntax">Sintaxis</h2>

<pre class="syntaxbox">opacity:  &lt;valor alfanumérico&gt;</pre>

<h3 id="Values" name="Values">Valores</h3>

<dl>
 <dt><code>&lt;alphavalue&gt;</code></dt>
 <dd>Es un número cuyo valor se encuentra entre 0.0 y 1.0, ambos incluidos. Este valor representa la opacidad. Si el valor se sale de la escala, será ajustado al valor válido más cercano.
 <table class="standard-table">
  <tbody>
   <tr>
    <th>valor</th>
    <th>Significado</th>
   </tr>
   <tr>
    <td><code>0</code></td>
    <td>El elemento es transparente (invisible).</td>
   </tr>
   <tr>
    <td>Cualquier valor entre 0 y 1</td>
    <td>El elemento es translúcido.</td>
   </tr>
   <tr>
    <td><code>1</code></td>
    <td>El elemento es opaco (sólido).</td>
   </tr>
  </tbody>
 </table>
 </dd>
</dl>

<h2 id="Examples" name="Examples">Ejemplos</h2>

<pre class="brush: css">hbox.example {
  opacity: 0.5; /* see the background through the hbox */
}</pre>

<h3 id="Live_Example" name="Live_Example">Live Example</h3>

<pre>pre {                               /* make the box translucent (20% opaque) */
   border: solid red;
   opacity: 0.2;
   filter: alpha(opacity=20);       /* IE8 and lower */
   zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */
}</pre>

<pre>pre {                               /* make the box translucent (50% opaque) */
   border: solid red;
   opacity: 0.5;
   filter: alpha(opacity=50);       /* IE8 and lower */
   zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */
}</pre>

<pre>pre {                               /* make the box translucent (80% opaque) */
   border: solid red;
   opacity: 0.8;
   filter: alpha(opacity=80);       /* IE8 and lower */
   zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */
}</pre>

<h3 id="Different_opacity_with_.3Ahover" name="Different_opacity_with_.3Ahover">Variando la opacidad con :hover</h3>

<pre class="brush: html">&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
img.opacity {
   opacity: 1;
   filter: alpha(opacity=50);
   zoom: 1;
 }

img.opacity:hover {
   opacity: 0.5;
   filter: alpha(opacity=100);
   zoom: 1;
 }
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;img src="//developer.mozilla.org/media/img/mdn-logo.png" alt="MDN logo" width="128" height="146" class="opacity"&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

<h2 id="Specifications" name="Specifications">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentarios</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'opacity') }}</td>
   <td>{{ Spec2('CSS3 Transitions') }}</td>
   <td>Define <code>opacity</code> como una animación.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Colors', '#opacity', 'opacity') }}</td>
   <td>{{ Spec2('CSS3 Colors') }}</td>
   <td>Definición inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad entre navegadores</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td rowspan="3">Basic support</td>
   <td rowspan="3">1.0</td>
   <td rowspan="3">{{ CompatGeckoDesktop("1.7") }}</td>
   <td>9.0</td>
   <td rowspan="3">9.0</td>
   <td rowspan="3">1.2 (125)</td>
  </tr>
  <tr>
   <td>8.0<br>
    <code>filter: alpha(opacity=xx)<br>
    filter: "alpha(opacity=xx)" </code><br>
    (both are synonymous)</td>
  </tr>
  <tr>
   <td>4.0<br>
    <code>filter: alpha(opacity=xx)</code></td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table" style="height: 156px; width: 827px;">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td rowspan="3">Basic support</td>
   <td rowspan="3">1.0</td>
   <td rowspan="3">{{ CompatGeckoMobile("1.7") }}</td>
   <td>9.0</td>
   <td rowspan="3">9.0</td>
   <td rowspan="3">3.2</td>
  </tr>
  <tr>
   <td>8.0<br>
    <code>filter: alpha(opacity=xx)<br>
    filter: "alpha(opacity=xx)" </code><br>
    (both are synonymous)</td>
  </tr>
  <tr>
   <td>4.0<br>
    <code>filter: alpha(opacity=xx)</code></td>
  </tr>
 </tbody>
</table>
</div>

<ul>
 <li><strong>History:</strong>  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>Gecko 1.9.1 (Firefox 3.5) and later do not support<code> -moz-opacity</code> and support for <code>MozOpacity</code> in javascript was <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=730532">removed</a> in Gecko 13.  By now, you should be using simply<code> opacity</code>.</li>
 <li>Prior to version 9, Internet Explorer does not support <code>opacity</code>, rather it supports <code>filter</code> instead.</li>
 <li>IE4 to IE9 supported the extended form <code>progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)</code>.</li>
 <li>IE8 introduced <code>-ms-filter</code>, which is synonymous with <code>filter</code>. Both are gone in IE10</li>
 <li>Similar to <code>-moz-opacity</code>, <code>-khtml-opacity</code> has been dead since early 2004 (release of Safari 1.2).<br>
  Konqueror never had support for <code>-khtml-opacity</code> and had been supporting <code>opacity</code> since version 4.0.</li>
</ul>

<h2 id="See_also" name="See_also">Más información</h2>

<ul>
 <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms532910%28VS.85%29.aspx">MSDN Microsoft's filter:alpha(opacity=xx)</a></li>
</ul>