Transparencia CSS
La propiedad opacity especifica la opacidad o transparencia de una etiqueta.
Imagen transparente
La propiedad opacity puede tomar un valor de 0.0 a 1.0. A mayor valor, mayor transparencia.
Nota: Para navegadores antiguos se puede usar filter:alpha(opacity=x)
. El valor de x puede ser de 0 a 100. A mayor valor, mayor transparencia.
img {
opacity: 0.5;
filter: alpha(opacity=50);
}
Transparencias con hover
La propiedad opacity
es común usarla en combinación con la pseudo-clase :hover para cambiar la transparencia cuando el puntero del mousa pasa por encima.
En el siguiente ejemplo, se especifica una imagen con opacidad pero cuando pasa encima el puntero del mouse elimina la opacidad:
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
También puede ser a la inversa, que cuando pasa encima el puntero del mouse aplique la opacidad a la imagen:
img:hover {
opacity: 0.5;
}
Caja Transparente
Cuando usamos la propiedad opacity
para agregar transparencia a el fondo de un elemento, todas las etiquetas anidadas heredan la misma transparencia. Esto puede hacer que el texto dentro de una etiqueta con mucha transparencia, sea difícil de leer.
div {
opacity: 0.5
}
Transparencia usando RGBA
Si no se desea que la opacidad aplique a las etiquetas anidadas, entonces se utilizan los valores de color RGBA.
Un valor de color RGBA es especificado con rgba(red,green,blue,alpha)
. El parámetro alpha es valor numérico entre 0.0 a 1.0
div {
background: rgba(76, 175, 80, 0.3)
}