Efecto de opacidad
La opacidad nos permite controlar como de transparentes son los colores o las imágnes mostradas en una página web.
Para los colores esta propiedad tiene el mismo efecto que el cuarto componente usado para codificarlos tanto en hexadecimal como por sus componetes RGB (función rgb) o por los HSL (función hsl).
Una ventaja de usar este propiedad es la posibilidad de animarla: lograr cambios suaves entre diferentes grados de opacidad.
El nombre usado en css es opacity, y usa valores decimales entre 0 (totalmente transparente) a 1 (totalmente opaco)
Tiene una utilidad inmediata en los efecto hover: cambiar la transparencia al pasar el ratón. También la habrás visto cuando se abre una ventana modal, donde el fondo de la página queda medio oculto.
<head>
<style>
.cuadro{
opacity: 1
}
.cuadro:hover{
opacity: 0.4
}
</style>
</head>
<body>
<div>
<img class="cuadro" src="/tutorcss3/imgs/opacidad1.png">
</div>
</body>
Opacidad de los colores
Al igual que con las imágenes se puede cambiar la opacidad de los colores. Para coprobarlo mira como cambia la transparencia de estos cuadros al pasarles el ratón.
En este caso le hemos puesto una transición para que el cambio sea suave. Pasa el ratón por estos cuadros para comprobarlo
Como ves en esta ocasión cambiamos la transparencia de los fondos al pasar el ratón, pero el cambio es gradual gracias a transition
<head>
<style>
.cuadro{
background: gray;
color: white;
font-size: 32px;
opacity: 1;
transition: opacity 1000ms;
}
.cuadro:hover{
opacity: 0.5;
transition: opacity 1000ms;
}
</style>
</head>
<body>
<div class="cuadro">
<p>Cambiando transparencias con transition</p>
<p>El efecto es como si aclaramos el color</p>
</div>
</body>
Prueba el ejemplo y observa como el efecto afecta a todo el bloque, incluído el texto. La opacidad afecta al bloque completo, no es un efecto del fondo.