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.

Efecto opacidad
¡Desvela la imagen!
Efecto opacidad

<head>

<style>

.cuadro{

  opacity: 1

}

.cuadro:hover{

  opacity: 0.4

}

</style>

</head>

<body>

<div>

<img class="cuadro" src="/tutorcss3/imgs/opacidad1.png">

</div>

</body>

Una muestra sencilla de cambio de transparencia
Con las reglas de etilo CSS es posible modificar la transparencia de colores sólidos o de imágenes.

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

Rojo #FF0000
Verde #00FF00
Azul #0000FF

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>

En esta ocasión cambiamos la transparencia del fondo de forma gradual

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.

El cambio de transparencia u opacidad tiene un efecto como de aclarar el color, pero en realidad se está permitiendo ver a través del fondo.