opacity

Este articulo necesita una revisión editorial. Cómo puedes ayudar.

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Sumario

La propiedad CSS opacity define la transparéncia de un elemento, esto es, en que grado se superpone el fondo al elemento.

Usando esta propiedad con un valor diferente a 1 situa al elemento en un nuevo contexto de apilamiento.

Valor inicial1.0
Applies toall elements
Heredableno
Mediavisual
Valor calculadothe specified value, clipped in the range [0,1]
Animatableyes, as a number
Canonical orderel orden único no-ambigüo definido por la gramática formal

Sintaxis

opacity:  <valor alfanumérico>

Valores

<alphavalue>
Es un número cuyo valro se encuentra entre 0 .0 y 1.0, ambos incluidos. Este valor representa la opcidad. Si el valro se sale de la escala, será ajustado al valor valido más cercano.
valor Significado
0 El elemento es transparente (invisible).
Cualquier valor entre 0 y 1 El eleemnto es translucido.
1 El elemento es opaco (solido).

Ejemplos

hbox.example {
  opacity: 0.5; /* see the background through the hbox */
}

Live Example

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 {                               /* 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 {                               /* 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 */ 
}

Variando la opacidad con :hover

<!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>

Specificaciones

Especificación Estado Comentarios
CSS Transitions
The definition of 'opacity' in that specification.
Working Draft Define opacity como una animación.
CSS Color Module Level 3
The definition of 'opacity' in that specification.
Recommendation Definición inicial

Compatibildiad entre navegadores

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.7 or earlier) 9.0 9.0 1.2 (125)
8.0
filter: alpha(opacity=xx)
filter: "alpha(opacity=xx)"

(both are synonymous)
4.0
filter: alpha(opacity=xx)
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1.7) 9.0 9.0 3.2
8.0
filter: alpha(opacity=xx)
filter: "alpha(opacity=xx)"

(both are synonymous)
4.0
filter: alpha(opacity=xx)
  • 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 and support for MozOpacity in javascript was removed in Gecko 13.  By now, you should be using simply opacity.
  • Prior to version 9, Internet Explorer does not support opacity, rather it supports filter instead.
  • IE4 to IE9 supported the extended form progid:DXImageTransform.Microsoft.Alpha(Opacity=xx).
  • IE8 introduced -ms-filter, which is synonymous with filter. Both are gone in IE10
  • Similar to -moz-opacity, -khtml-opacity has been dead since early 2004 (release of Safari 1.2).
    Konqueror never had support for -khtml-opacity and had been supporting opacity since version 4.0.

Más información

Etiquetas y colaboradores del documento

 Colaboradores en esta página: UlisesGascon, teoli
 Última actualización por: UlisesGascon,