Aunque esto ya no esté validado por los estándares, es una excelente forma de darle transparencia a nuestras imágenes con el uso de CSS.
Os mostraremos algunos ejemplos aplicados a la transparencia en CSS:
Ejemplo 1: Crear una imagen con transparencia
Podemos aplicar transparencia a las imágenes de esta forma. Firefox usa la propiedad opacity:x para la transparencia, mientras que IE usa filter:alpha(opacity=x). La sintáxis CSS3 para la transparencia es opacity:x.
No hay que olvidar que:
En Firefox (opacity:x) x puede tener un valor desde 0.0 hasta 1.0. Un valor más bajo hará el elemento más transparente.
En IE (Internet Explorer) sería así: (filter:alpha(opacity=x)) x puede ser un valor de 0 a 100. Un valor más bajo hará el elemento más transparente.
Un ejemplo con una imagen sin transparencia:
Con transparencia 0.4 (Firefox) o 40 (IE):
Ejemplo 2: Imagen con efecto hover de transparencia
Como se puede ver, es similar al anterior código solo que ahora se han implementado los atributos onmouseover y onmouseout. El atributo onmouseover define que ocurrirá en el momento que el cursor se mueva encima de la imagen. En este caso lo que ocurre es que la imagen no se vuelve transparente cuando movemos el cursor hacia ella.
Cuando el cursor se retira de la imagen, esta vuelve a tener transparencia. Esto se consigue con el atributo onmouseout.
Ejemplo 3: Texto en caja transparente
Hay algo dentro de esta caja.
Hay algo dentro de esta caja.
Hay algo dentro de esta caja.
Hay algo dentro de esta caja.
Hay algo dentro de esta caja.
El código fuente para crear esta caja transparente sería este:
<html>
<head>
<style type="text/css">
div.background
{
width: 500px;
height: 250px;
background: url(tuimagen.gif) repeat;
border: 2px solid black;
}
div.transbox
{
width: 400px;
height: 180px;
margin: 30px 50px;
background-color: #ffffff;
border: 1px solid black;
/* para IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}
div.transbox p
{
margin: 30px 40px;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>Hay algo dentro de esta caja.
Hay algo dentro de esta caja.
Hay algo dentro de esta caja.
Hay algo dentro de esta caja.
Hay algo dentro de esta caja.
</p>
</div>
</div>
</body>
</html>
Primero hemos creado un div con una clase llamada “background” con una altura y anchura fixed, una imagen de fondo y un borde. Después creamos un div más pequeño con clase “transbox” dentro del primer elemento div. Este div tendrá una anchura fixed, una imagen de fondo y un borde. Este div será transparente.
Dentro del div transparente añadimos texto dentro de un párrafo (elemento
).
Listo, ya tenemos creada nuestra imagen con transparencia. Cualquier duda escribirla en los comentarios.
