opacity
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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 0El elemento es transparente (invisible). Cualquier valor entre 0 y 1 El elemento es translúcido. 1El elemento es opaco (sólido).
Ejemplos
css
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
html
<!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 # propdef-opacity |
| Scalable Vector Graphics (SVG) 2 # ObjectAndGroupOpacityProperties |