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 inicial | 1 |
---|---|
Applies to | all elements |
Heredable | no |
Percentages | map to the range [0,1] |
Valor calculado | The same as the specified value after clipping the number to the range [0.0, 1.0]. |
Animation type | by 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