opacity

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 inicial	`1.0`
Applies to	all elements
Heredable	no
Media	visual
Valor calculado	the specified value, clipped in the range `[0,1]`
Animatable	yes, as a number
Canonical order	el 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

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

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