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
Applies toall elements
Heredableno
Percentagesmap to the range [0,1]
Valor calculadoThe same as the specified value after clipping the number to the range [0.0, 1.0].
Animation typeby computed value type

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

Specification
CSS Color Module Level 4
# transparency

Compatibilidad con navegadores

BCD tables only load in the browser

Más información