GERENCIA VIRTUAL

“Capacitación y asesoría a solo un click”

Opacidad o Transparencia
La propiedad opacity especifica la opacidad o transparencia de un elemento, la propiedad opacity
puede tener valores comprendidos entre 0,0 hasta 1,0, siendo el valor mas bajo el mas
transparente.
Nota: IE8 y versiones anteriores utiliozan filter:alpha(opacity=x). En donde la x puede tomar un
valor de 0 hasta 100. Un valor más bajo hace que el elemento sea más transparente.

img {
opacity: 0.5;
filter: alpha(opacity=50); /* para IE8 y anteriores */
}

Ver: Código 166.html

Efecto transparente en hover

La propiedad opacity se utiliza a menudo junto con el selector :hover para cambiar la opacidad en
al posicionar el ratón:

img {
opacity: 0.5;
filter: alpha(opacity=50); /* para IE8 y anteriores */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* para IE8 y anteriores */
}

Ver: Código 167.html

Explicación
En el ejemplo anterior el primer bloque de CSS es similar al código 165.html, pero hemos añadido
lo que debe suceder cuando un usuario se desplaza sobre una de las imágenes, en este caso
queremos que la imagen no sea transparente cuando el usuario se desplaza sobre ella, sino que se
oscurezca. El CSS para esto es opacity:1; .Cuando el puntero del ratón se aleja de la imagen, la
imagen será transparente de nuevo.
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

El caso contrario sería:

img:hover {
opacity: 0.5;
filter: alpha(opacity=50); /* para IE8 y anteriores */
}

Ver: Código 168.html

Caja Transparente
Cuando se utiliza la propiedad opacity para añadir transparencia al fondo de un elemento, todos
los elementos hijos heredan esta propiedad de transparencia, por lo que a veces puede
dificultarse la lectura del texto dentro de estas cajas.

div {
opacity: 0.3;
filter: alpha(opacity=30); /* para IE8 y anteriores */
}

Ver: Código 169.html

Transparencia RGBA
Cuando estudiábamos la propiedad del color pudimos ver que la opacidad en RGB la podíamos
manejar con un canal Alfa “A” , el cual se encarga de manejar la opacidad del color mas no del
texto.

div {
background: rgba(76, 175, 80, 0.3) /* fondo azul con opacity 30% */
}

Ver: Código 170.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Texto en cajas transparentes

En primer lugar, creamos un elemento <div> (class = "fondo") con una imagen de fondo, y un
borde. Luego se crea otra <div> (class = "cajatransp") dentro de la primera <div>. La <div class =
"cajatransp"> tiene un color de fondo y un borde, el div es transparente. Dentro del <div>
transparente añadimos el texto dentro de un elemento <p>.

div.fondo {
background: url(imagenes/orquidea.jpg) repeat;
border: 2px solid black;
}
div.cajatrans {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* para IE8 y anterior */
}
div.cajatrans p {
margin: 5%;
font-weight: bold;
color: #000000;
}

Ver: Código 171.html