Propiedad CSS opacity
La propiedad CSS opacity establece el nivel de transparencia de un elemento. Prueba el ejemplo tú mismo y ve los resultados.
La propiedad CSS opacity establece el nivel de transparencia de un elemento. Controla el elemento completo: el texto, el fondo, los bordes y todos los elementos hijos se atenúan juntos. Es una de las propiedades de CSS3.
Usa opacity cuando quieras que un elemento (y todo lo que contiene) parezca desvanecido: para atenuar un botón inactivo, crear un efecto hover o superponer una marca de agua sobre el contenido.
Cómo funciona el valor de opacity
El valor es un número entre 0 y 1:
0— el elemento es completamente transparente (invisible, pero sigue ocupando espacio y permanece interactivo).1— el valor predeterminado; el elemento es completamente opaco.- Cualquier valor intermedio, como
0.5, hace que el elemento sea parcialmente transparente. Los valores más bajos significan mayor transparencia.
También puedes escribir el valor como porcentaje en los navegadores modernos, donde 50% equivale a 0.5.
Los valores negativos no son válidos y se limitan — el navegador trata cualquier valor por debajo de 0 como 0 y cualquier valor por encima de 1 como 1.
La opacidad también afecta a los elementos hijos. Cuando atenúas un elemento padre, todos los hijos se atenúan con él, y no puedes hacer que un hijo sea completamente opaco de nuevo dándole opacity: 1. Si solo quieres un fondo semitransparente mientras mantienes el texto y los hijos sólidos, usa un color RGBA en background-color — por ejemplo background-color: rgba(142, 191, 66, 0.3).
Un elemento con un valor de opacity menor que 1 crea un nuevo contexto de apilamiento. Esto puede cambiar la forma en que se superpone con los elementos vecinos, de modo que un elemento atenuado puede aparecer por encima o por debajo de los elementos hermanos de forma diferente a lo esperado.
| Valor inicial | 1.0 |
|---|---|
| Se aplica a | Todos los elementos. |
| Heredado | No. |
| Animable | Sí. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.opacity = "0.3"; |
Sintaxis
Sintaxis de CSS opacity
opacity: number | initial | inherit;Ejemplo de la propiedad opacity:
Ejemplo de código CSS opacity
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example1 {
background-color: #8ebf42;
opacity: 0.3;
}
.example2 {
background-color: #8ebf42;
opacity: 1;
}
</style>
</head>
<body>
<h2>Opacity property example</h2>
<h3>Opacity level is 0.3;</h3>
<div class="example1"> Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </div>
<h3>Opacity level is 1;</h3>
<div class="example2">Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
</body>
</html>Resultado
En el ejemplo siguiente, el nivel de opacidad de la primera imagen es 1.0, el de la segunda imagen es 0.6 y el de la tercera imagen es 0.2.
Ejemplo de la propiedad opacity con tres niveles de opacidad:
Otro ejemplo de código CSS opacity
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.a {
opacity: 1;
}
img.b {
opacity: 0.6;
}
img.c {
opacity: 0.2;
}
</style>
</head>
<body>
<h2>Opacity property example</h2>
<h3>Opacity: 1.0;</h3>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="house" width="300" height="300" class="a" />
<h3>Opacity: 0.6;</h3>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="house" width="300" height="300" class="b" />
<h3>Opacity: 0.2;</h3>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="house" width="300" height="300" class="c" />
</body>
</html>opacity vs. fondos RGBA
Un error común es usar opacity cuando solo se quiere un fondo semitransparente. Como opacity también atenúa los elementos hijos, el texto dentro del cuadro también se vuelve tenue y más difícil de leer. Un color de fondo RGBA aplica la transparencia únicamente al color de fondo, dejando el texto completamente opaco:
/* Fades the whole box, including the text */
.with-opacity {
background-color: #8ebf42;
opacity: 0.3;
}
/* Only the background is transparent; text stays crisp */
.with-rgba {
background-color: rgba(142, 191, 66, 0.3);
}Para controlar el color del cuadro en sí, consulta background-color.
Desvanecer al pasar el cursor
Como opacity es animable, se combina de forma natural con transition para crear efectos de desvanecimiento suaves, como atenuar una imagen hasta que el usuario pase el cursor sobre ella:
.thumb {
opacity: 0.6;
transition: opacity 0.3s ease;
}
.thumb:hover {
opacity: 1;
}opacity vs. visibility y display
opacity: 0, visibility: hidden y display: none ocultan un elemento, pero se comportan de manera diferente:
| Declaración | Visible | Ocupa espacio | Se puede hacer clic |
|---|---|---|---|
opacity: 0 | No | Sí | Sí |
visibility: hidden | No | Sí | No |
display: none | No | No | No |
Un elemento con opacity: 0 es invisible pero sigue respondiendo a los clics, por lo que debes añadir pointer-events: none si necesitas que tampoco sea interactivo.
Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| number | Define el nivel de opacidad. El valor predeterminado es 1.0. | Pruébalo » |
| initial | Hace que la propiedad use su valor predeterminado. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. |