opacity

Resumen

La propiedad CSS opacity define la transparencia de un elemento, esto es, en qu茅 grado se superpone el fondo al elemento.

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

Valor inicial1.0
Applies toall elements
Heredableno
Valor calculadothe specified value, clipped in the range [0,1]
Animation typea number

Sintaxis

opacity:  <valor alfanum茅rico>

Valores

<alphavalue>
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.
valor Significado
0 El elemento es transparente (invisible).
Cualquier valor entre 0 y 1 El elemento es transl煤cido.
1 El elemento es opaco (s贸lido).

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>

Especificaciones

Especificaci贸n Estado Comentarios
CSS Transitions
La definici贸n de 'opacity' en esta especificaci贸n.
Working Draft Define opacity como una animaci贸n.
CSS Color Module Level 3
La definici贸n de 'opacity' en esta especificaci贸n.
Recommendation Definici贸n inicial

Compatibilidad entre navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.7 o anterior) 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