Recursos y Descargas

Esto no es un blog. Es una sección que programé para ir publicando aquellas cositas que me parecen interesantes y, por cualquier motivo, quiero tener a mano. Copia lo que quieras, usa lo que quieras (pero respeta sus licencias).

Pon un PNG con fondo transparente...

Escrito por: Martín el 26-09-2008 07:13:47

Pon un PNG con fondo transparente...

Hasta ahora, y convencido por usar multiplesIE, creía que todos los parches para que se vean tus PNG con fondo transparente funcionaban pero el otro día me encontré en una situación un tanto difícil de explicar.

Había hecho un boceto para una web, que era un PNG completo con fondo transparente porque tenía que pisar sobre un fondo que se escala a la resolución del navegador.

Pues bien, hago la maqueta, pongo mi hack de siempre, abro IE7... se ve bien, abro el multiples IE (sólo instalé el 6... creo que ya no hace falta más)... y ¡SORPRESA!... se ve bien.

Entonces, como no me fiaba de eso, le pregunté a mi hermana que tiene solo IE6 instalado y, ohhh ¡OTRA SORPRESA! se veía como una auténtica basura!

Entonces bien, luego de romperme el cerebro tratando de solucionarlo, y de probar todos y cuanto parche existe en el mundo... descubrí que el problema no es el parche, sino como exportes tu PNG desde donde lo generes (yo uso FW para las maquetas de mis webs).

Ahora bien, dí con la solución, y como me la voy a olvidar, la dejo aquí escrita para recordármelo a mí mismo la próxima vez que haga una web...

Aquí los pasos:

1) Exporta tu PNG en formato PNG32. Aplicando la opción MATE en NINGUNO.
2) Tu documento no debe tener ningún fondo si lo que quieres es que sea transparente.
3) Usa el hack que dejo a continuación, porque es el que uso yo y funciona bien.
4) Cuando ues el PNG en tu xHTML, no te olvides de algo importante... ponle ancho y alto a la imagen... sino, se verá de 1x1 px.
5) Descárgate mis archivos y modifica las rutas según tu web.

Y no hay más... Suerte!