Hola tenia tiempo sin postear acá pero es que he estado bastante ocupado.

En fin, en este post les presento un pequeño tip de CSS que nos permite usar png’s transparentes como background y para el caso de IE6 (mi mayor pesadilla) usaremos un hack que nos permite cambiar la imagen .png por cualquier otra extensión que acepte este navegador.

Las propiedades CSS que usaremos serán:

background: transparent url(ruta_de_imagen.png);
<!-- hack para IE6. Podemos usar cualquier otro tipo de imagen que acepte el navegador -->
_background: url(ruta_de_imagen.gif);

Una vez que tengamos estructurado nuestro HTML:

Declaramos los div’s a los que vamos a colocarle la transparencia, por ejemplo:

#blue{
position:absolute;
background: transparent url(../images/bkg_blue.png) no-repeat;
_background: url(../images/bkg_blue.gif) no-repeat;
width:300px;
height:300px;
left: 542px;
top: 115px;
}

#red{
position:absolute;
background: transparent url(../images/bkg_red.png) no-repeat;
_background: url(../images/bkg_red.gif) no-repeat;
width:200px;
height:300px;
left: 140px;
top: 115px;
}

Ahora, vean los resultados, verán una excelente transparencia en navegadores como IE7, FireFox3.0, Opera9.0, Safari y un gif en IE6!!!!!! XDD

Al darle la propiedad position:absolute; podemos colocar el div en una posición ajustada por coordenadas y así veremos el efecto con mayor facilidad.

Acá les dejo una serie de ejemplos, espero que les sean útiles. Fueron probados en IE7, FireFox3.0, Opera9.0, Safari y el “Glorioso IE6″ xDD chau, cualquier duda pueden comentarla acá, con gusto se las respondo!!

Ver: Ejemplo 1 Ejemplo 2 Ejemplo 3

Descargar ejemplos