Internet Explorer 6 tiene un gran fallo, no le gustan los PNG, así que tratará la transparencia de ellos (su punto más fuerte), como si no la tuvieran. Ha habido muchos fix y hacks por los siglos de los siglos, pero aquí te traemos otro que da resultado.
Los pasos a seguir son muy simples:
- Metemos la imagen PNG entre un div con class png-holder (Obviamente “transparent.png” es tu imagen PNG que quieres que tenga transparencia en IE 6:
- Así ya funcionaría en IE 7, 8, Firefox, Safari y Opera, pero para que funcione en IE 6 Hace falta un paso más. Definimos el código CSS:
#png-holder {
width: 300px;
height: 150px;
text-indent: -9999px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/transparent.png', sizingMethod='crop');
}
Como se ve, se usa la propiedad filter de Microsoft. Con esto ya podremos ver nuestra imagen con transparencia en Internet Explorer 6.
Vía | Web Monkey
Sigue la onda...
Puedes recibir gratis más artículos por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!
40 plantillas CSS y XHTML gratis y de alta calidad »
28 tutoriales de poderosos efectos de luz con Photoshop »
100 bonitas y variadas texturas gratis »
104 tipografías gratis para diseñar sitios y logotipos »
Pack de +100.000 tipografías gratis »
Hoja de ayuda sobre la especificidad CSS »
Los 50 mejores iconos del 2008 »
Varios logotipos interesantes creados con CSS »
Excelentes diseños de logos minimalistas »
Speaky (4)
Erik (3)
Gustavo (3)
Marco (3)
@chifliiiii (2)
beastieux (2)
Boda (2)
drakkar (2)
Gil Peñaloza (2)
niconectado (2)
. My recent post Pack de 100000 tipografías...
Por ahora hay 9 comentarios ¿Quieres opinar?
Pero el problema de esta solución es que no valida el css..
Ares
Hola Ares, no lo valida ya que la propiedad filter no cumple los estándares, pero es una propiedad creada por Microsoft para su navegador web Internet Explorer, y si no se usa no es posible que IE 6 lea la transparencia de las imágenes PNG.
Saludos.
[...] como un navegador que siga los estándares. Esta librería incluye todo tipo de soluciones: transparencia PNG en IE y otros problemas diversos que afectan a la visualización de la página [...]
Interesante solución, aunque no puedo hacerla funcionar para los backgrounds con png. Tengo unos botones que deberían ser transparentes pero no lo son. Cual sería la solución para esto?
#div { background: url(../images/botones.png) no-repeat 0 0;}
Un saludo!
@Aresillo!!
Si quieres que tu hoja de estilos sea valida, entonces te recomiendo meter estos hacks: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’/images/transparent.png’, sizingMethod=’crop’);
en una hoja de estilos aparte algo como ie6.css para este tipo de hacks y te quedas con general.css para tu pagina enterera, de este modo, tu hoja de estilos principal general.css SI te va a validar y por supuesto, ie6.css no lo hara, pero a quien le importa validad una hoja de estilos que tiene condicionales…?
no me he enterado de este post
vamos que me suena a chino
pero entro para darte la enhorabuena
porque me he dado una vuelta y he visto tu curriculum
y chapó
voy a estudiar que el domingo tengo oposiciones
saludos
yo ocupé la DD_belated y me funcionó muy bien, soporta background-image que es lo que más les cuesta a estas soluciones y como es un JS no da problemas para validar en css
Ps vamos a ver cque gestos hace el png
buenas,
a mi simplemente no me funciona, sigo viendo la imagen opaca.
gracias de todos modos