BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Pon un PNG con fondo transparente...

26/SEP/2008 6.176 visitas Ver comentarios
Pon un PNG con fondo transparente...

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

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!

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 21 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018