---
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: <valor alfanumérico></pre>
<h3 id="Values" name="Values">Valores</h3>
<dl>
<dt><code><alphavalue></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"><!doctype html>
<html>
<head>
<style>
img.opacity {
opacity: 1;
filter: alpha(opacity=50);
zoom: 1;
}
img.opacity:hover {
opacity: 0.5;
filter: alpha(opacity=100);
zoom: 1;
}
</style>
</head>
<body>
<img src="//developer.mozilla.org/media/img/mdn-logo.png" alt="MDN logo" width="128" height="146" class="opacity">
</body>
</html>
</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>