diff options
Diffstat (limited to 'files/es/web/css/opacity/index.html')
| -rw-r--r-- | files/es/web/css/opacity/index.html | 216 |
1 files changed, 216 insertions, 0 deletions
diff --git a/files/es/web/css/opacity/index.html b/files/es/web/css/opacity/index.html new file mode 100644 index 0000000000..154e4d7d82 --- /dev/null +++ b/files/es/web/css/opacity/index.html @@ -0,0 +1,216 @@ +--- +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" title="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" title="http://msdn.microsoft.com/en-us/library/ms532910(VS.85).aspx">MSDN Microsoft's filter:alpha(opacity=xx)</a></li> +</ul> |