PNG’s transparentes en IE6
Es indiscutible las bondades que ha traÃdo la inclusión de Unisys del formato PNG. Lo mejor de él, es la mayor profundidad de colores (miles, aún comprimido) y la facilidad de uso de su canal alfa. Su uso en web aún es limitado, ya que como no será sorpresa, Microsoft Internet Explorer no lo soporta ni siquiera en su versión 6 (al parecer sà en la v7). Mozilla Firefox, Apple Safari, Opera y otros no tienen problemas con visualizarlo.
La idea de este post es crear un PNG transparente con un drop shadow (sombra) negro para que se note su ventaja con respecto al ultrapasado, pero nunca mal ponderado GIF transparente. Existen muchos códigos que permiten utilizarlo, con JavaScript o filtros de IE, pero ninguno funciona correctamente sobre CSS.
Sigue el estilo utilizado:
#imagen {
width: 400px;
height: 219px;
background-image: url(”pildora.png”) !important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’imagen/pildora.png’);
}
Explico: el ancho y alto son para establecer un área y que todos los browsers abran la imagen del mismo tamaño. El problema que se tiene con los filter, radica en que funciona para IE pero no para Firefox, y si agregamos el background, funciona en Firefox pero no en IE. La solución es agregar !important, para que Firefox tome ciertos elementos, y otros no. Además aún asà el código XHTML valida según W3C, no el CSS ya que filter es de Microsoft y no de W3C (corregido).
La solución es utilizar un background normal para Firefox con un !important y justo debajo un background vacÃo (none), ya que IE no reconoce !important y tomará como referencia el inmediatamente siguiente. Luego de esto, viene el filter vacÃo (none nuevamente) y una cláusula !important para Firefox y el consiguiente filter AlphaImageLoader para que IE reconozca el alfa sobre los PNG’s.
Un detalle que puede que hayan notado: en el filter de IE se especifica la ruta de la imagen en un nivel diferente que la de IE. Esto porque la imagen se debe de especificar no desde la ruta del CSS (como ocurre con el background), sino con dirección de la raÃz de la página web (no del sitio, me refiero a llamarla de forma relativa, no absoluta).
Suerte y a disfrutar del buen diseño con los PNG transparentes.
PD: gracias por sus comentarios para hacerme ver el error de validación del CSS.
Está muy bueno…
¿Para que versiones de IE funciona?… o ¿es sólo la versión 6 la que tiene este problema?
hasta la 6 ningun IE visualiza PNG’s transparentes, se supone q la 7 esto estaria integrado ya.
Dices que el css valida, pues creo que no, lo acabo de probar y no valida;
????????
This Page Is Valid XHTML 1.0 Transitional!
si valida…….
Si que valida el HTML, pero no valida el CSS.
Perdona admin, no pretendo molestar, te lo aseguro, es mas, si hace falta te ayudo,si lo necesitas claro, que seguro que no, mi comentario era solo un aviso, nada mas.
Lo mejor para todos.
un saludazo desde Londres.
No me habia fijado en ese detalle, le echare una mirada, es importante q valide en el caso de un futuro desarrollo strict. Publicare la modificacion.
Saludos desde el tercer mundo.
Claro, lo q no valida en el CSS es el filter q es propietarrio de Microsoft, no de la W3C. De hecho, ningun filter de MS valida, claro está. Ya corregi parte del código, y el txt de este post. Gracias por sus observaciones.
pues a mi no me sale, ya me estoy hartando de esto
jejje
no se porque, tantos recursos que e probado y en ninguno me queda, tan bonito que se ve con png
nimodo, tendre que entrarle con gif
como q no te funciona! esta ultra probado este codigo.. algo mas estas haciendo, o tu PNG no esta bien exportado… revisa bien como lo estas aplicando, debes respetar las carpetas tal cual esta en el codigo CSS. suerte.
Hola a todos, si usais un comentario condicional para ie y ahi le colocais los filtros, si que valida.
Un saludo.
Muy práctico tu aporte. Pero un detalle quisiera hacer ver: a pesar de visualizar tu página con Firefox a 1280×1024, no es posible ver correctamente el div de la izquierda, ya que el de la izquierda se monta sobre él. Es decir, al intentar leer el ejemplo CSS que has puesto, no se puede leer completamente la lÃnea más ancha porque queda debajo de la columna donde están los comentarios. Sólo veo hasta esto:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’imagen/p
El resto de la lÃnea se pierde.
Por lo demás, todo bien.
Un saludo
Fe de erratas:
He puesto “ya que el de la izquierda se monta sobre él” y debiera decir “ya que el de la derecha se monta sobre él”.
Por otro lado, debido al ancho fijo del de comentarios, tampoco quedó completa la lÃnea del comentario donde explicaba el problema.
Saludos
Si impaler ya me habia dado cuenta de ese detalle, pero por lo mismo no era para tener una palabra tan larga como para q se pase por debajo de la columna de comentarios. pero bueeno, en este post fue una excepcion.
Yo quisiera hacer enlaces con imágenes transparentes, y no sé realmente cómo plantearlo.
AgradecerÃa un poco de ayuda.
Muchas gracias.
Un saludo.
Susana: linkea la imagen <a href="link.html"><img src="imagen.png"></a>
bueno despues de mucho por fin logre solucionar el problema, en este foro tambien trataron este problema http://www.cristalab.com/foros/viewtopic.php?t=21618 , yo personalmente lo estoy implementando de la siguiente forma en mi CSS.
digamos que le asigno la clase “titular” a una tabla donde pondre titulares y preciso darle un fondo transparente, entonces:
.titular1{
background-image: url(ruta/fondo.png) !important;
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src=’ruta/fondo.png’, sizingMethod=’scale’);
background: repeat-y;/*o lo que se te venga en gana */
}
Hola qué tal, aplicando el filtro para que los pngs transparente se vean bien en el IE6 a través de CSS no consigo hacer que un png se vea repetido como fondo de una celda de tabla en el IE6. Solo aparece una sola vez, con el filtro aplicado, eso si. A ver si me puedes echar una mano con esto. Gracias.
Antonio, probaste quitando el width, height y agregando background:repeat: repeat; del codigo entregado mas arriba??? cuentame q tal te va con eso. saludos.
Bueno Jorge, he estado navegando por las aguas transparentes de este post y tengo que felicitarte por su elegancia de diseño y generosidad de contenidos. Y bueno, he probado tu consejo y nada. Lo cual me plantea una reflexión sobre este asunto de los navegadores que te querÃa comentar: si, como supongo, el script que publicas en este artÃculo esta ya más que testeado, y magistralmente explicado, por tu parte, ¿porqué se tienen que presentar este tipo de problemas impresisos que no hacen más que entorpecer nuestro trabajo? En fin, estoy bloqueado y cabreado con esto.
Un saludo y gracias de nuevo.
Buenas!!!
Muchas gracias por molestarte en poner estas cosillas.
Voy a probarlo de inmediate. Solo con lo de !Important ya me doy por satisfecho
Antonio, si me entregas un codigo para verlo, podria ayudarte mas. el codigo lo recontra probé en todos los browser a mi disposicion, pero modificaciones varias (como lo has propuesto, como fondo de celda) no lo tenia pensado y suelen pasar esas cosas. dame una URL mejor para echarle un vistazo a lo q pretendes hacer. Saludos!
Gracias Jorge, en este url está lo que quiero hacer:
http://www.antoniohermida.com/index2.htm
loco, gracias. no encontraba cómo hacer esto, no está en ninguna parte. entera pulenta la página.
vale.
Hola Jorge, te olvidaste de mi. Yo he estado superliado y no he podido mirar nada de lo que nos ocupa. Un saludo
Hola antonio, sieento mucho, se me fue completamente.. te importaria poner tu probleema en los foros, en Ayuda -> Códigos asi puedo ver mejor lo q podria ser. adjunta link, el codigo html, css…. ahi puedo desmenuzar el asunto y verte una solucion mejor.
salu2
hola
sigo luchando por los PNG transparentes,
1) porque en algunas paginas no me pide de activar el activex y en las que hago yo si, osea en las mias no se ve nada hasta que lo activo?
2) yo estoy tratando de poner un PNG transparente de fondo y arriba una imagen y le pongo un mapeado para hacer un link
el tema es que el fondo no me aparece hasta que activo el activex y cuando lo activo me desaparece el mapeado y me quedo sin links
bueno, si alguien sabe como solucionarlo…
muy buena la pagina,
saludos.
Hola a todos,
Llevo un par de dias volviendome loco con la implementación del código para poder ver transparencias de PNG’s definidos en los CSS. Aunque desde luego está fantásticamente explicado
y además parece muy sencillo de implementar, no consigo dar con la clave en mi código.. que es este:
div.contenedor{
margin: 0 auto;
padding: 0;
width: 830px;
background: url(../img/fbbg760.png) repeat-y 50% 0 !important;
background: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’img/fbbg760.png’);
}
Con este código, en Firefox veo el PNG correctamente, pero en Explorer, no veo ni siquiera la imagen.
Varias dudas al respecto:
1.- Vereis que he definido background, en vez de background-image.. He hecho esto porque con background-image, no se veÃa el PNG en Firefox, con background a secas, si.. y a falta de pan… xD Pero sabeis a que es debido?
2.- No entiendo muy bien el sentido del - background: none; -, ya que si lo quito, si que me aparece el PNG en Explorer, aunque sin el filtro aplicado (me aparece con el tÃpico bloque gris). Por lógica, si le dices al css que no te ponga fondo, como va a salir luego, con o sin filtro?
3.- No tendrá nada que ver que esté definiendo una class y no un ID, verdaD? O_o
4.- Qué está fallando para que no aparezca el **** PNG?
Muchas gracias a todos!
Saludos..
no funciona brother
¿Y qué hago para repetir la imagen? Necesito hacer un repeat-y, pero consigo que se repita en todos los navegadores excepto explorer 6. ¿sabes alguna solución para esto?
me disculparan pero encuentro contadiciones entre el ejemplo y los comentarios del autor, asi que les comento que para que funcione en FF, IE, O lo hice asi y me funciona correctamente:
body {
background: #000;
}
#NombreElemento {
width: 400px;
height: 219px;
background-image: url(”images/pildoras.png”) !important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/pildoras.png’);
}
muy buen sitio
Hola a todos… bueno, despues de muchas horas intentando lograr que el maldito IE 6 leyera las transparencias en png, he conseguido por ahi un fabuloso codigo javascript que resuelve el problema, solo hay que incrustarlo antes del HEAD y listo.. el script al ser leido por firefox, este automaticamente anula la funcion y no crea problemas para este navegador… los rollover funcionan bien en firefox, incluso en usandolos en capas y arrastrables.. es muy bueno.. la desventaja es que en el IE 6 anula la funcion rollover pero solo de las imagenes png., ahi se los dejo para que lo examinen un poco. cualquier duda o sugerencias, escribanme…
Ejemplo…
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion.split(”MSIE”)
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i”
img.outerHTML = strNewHTML
i = i-1
}
}
}
}
window.attachEvent(”onload”, correctPNG);
SUERTE!!!
ecosonoro, ese es el codigo de PNGFIX y justo ayer lo estaba usando, con algunos problemas (me transparenta un PNG y no el segundo de una misma pagina). Salu2.
Hola otra vez…. conseguà que todo me funcione, en todos los navegadores he conseguido ver una imagen png. Pero en el momento que programamos la página con php, es decir, en el momento que creamos un index.php, para llamar al index.html deja de funcionar en IE6, no es exactamente que deje de funcionar, se sigue viendo el png, pero dejan de funcionar todos los enlaces, incluso el menú en flash. En todos los navegadores funciona bien, excepto en IE6. ¿Alguien sabe a qué se debe esto?
Para que se repita:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’imagen/pildora.png’,sizingMethod=’scale’);
Yo también he estado 3 horas peleandome jeje.
Has intentado poner link a la prueba?… yo tengo el error que al utilizar ese código, no funcionan los links.. en el IE 6…
Hola a todos y gracias de antemano por leer este requerimiento, Estuve leyendo todos los mensajes de esta sección, tambien he probado los codigos que han colgado; con FF no tengo ningun problema pero con IE 6 no se ve mi imagen PNG, es como si no lo encontrara, no se ve nada, mi pregunta es, si el IE 6 no tiene la capacidad para mostrar PNG con fondo transparente o si estoy haciendo algo mal. aqui les paso mi codigo:
#logo{
position:absolute;
top:-10px;
left:0px;
width:193px;
height:243px;
background-image: url(../img/fondo.png) !important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../img/fondo.png’);
-moz-opacity:.85;
filter:alpha(opacity=85);
opacity:.85;
}
las ultimas 3 lineas son para darle transparencia alfa (lo encontre por ahi); eso si funciona pruebenlo!
Bueno ojala me puedan ayudar, recuerden debo hacer que el PNG con fondo transparente se vea en IE 6, porque aun es muy usado!!
Buenas, esta perfecto el codigo pero en IE ma han dejado de funcionar los inputs de texto… sabeis que podrÃa ser?
Mil gracias!
hola a todos, primero de todo agradecer al webmaster por la cantidad de información interesante que hay en esta página! eres un crack!
Luego veo que nadie a contestado a la duda del xq no funcionan los enlaces con pngs transparentes. He leido por alli que poniendo:
a { position: relative; z-index: 200; }
ya deberia funcionar, pero el tema es que sigue sin funcionarme en IE6…
Tengo el siguiente código:
Inicio •
Mapa del sitio •
Aviso Legal •
Contacto
con el css:
#pie {
position:relative;
background-position: top left;
width: 685px;
height: 57px;
left: 40px;
background-image: url(img/pie_verde.png) !important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’img/pie_verde.png’);
background-repeat: no-repeat;
}
#pie #info {
position:absolute;
font-size: 11px;
font-weight: bold;
text-align: center;
width: 465px;
margin-top: 20px;
}
Alguien puede ayudarme?? muchas gracias a todos!!
Pitu, publica tu duda en los foros con el codigo completo y ojala enlace online, ya q con lo q pusiste no alcance a dimensionar tu problema. saludos.
Ya lo he puesto en el foro tal y como me proponias
http://www.csslab.cl/foros/viewtopic.php?t=125
Gracias por dedicarme un poco de tu tiempo!!
Bueno estoy trabajando con IE7.. toy viendo que si funka con los enlaces con el primer codigo.. voy a probarlo con el 6.. ojalas funcione.. Gracias
en la ruta de la imagende fondo no se usan comillas.
bueno a mi no me funciono pero les pongo algo que si funciona:
div#imagen-cualquiera {
width: 700px; /* ancho de la imagen */
height: 173px; /* alto de la imagen */
background-image: url(logo.png) !important; /* url sin comillas */
/* menor que ie 7 */
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’sites/default/themes/deco/logo.png’);
}
div#imagen-cualquiera {
width: 700px; /* ancho de la imagen */
height: 173px; /* alto de la imagen */
background-image: url(logo.png) !important; /* url sin comillas */
/* menor que ie 7 */
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’sites/default/themes/deco/logo.png’);
}
uta, no pesca las etiquetas condicionale de ie!!!
no manches jorge, super maestro, si funciona, solo que tengo un degradado que hace el efecto de sombra en los bordes, aplico el codigo y me borra todo el contenido, pero si lo hace,
solo aplike este truco en el footer, por eso digo que si jala!
Buenas, la transparencia de los div en IE6 me funciono perfectamente. Ahora tengo un problema, esto bloquea todo el contenido que se encuentra dentro de los div’s tales como links etc. Como soluciono esto???
Gracias de antemano, saludos
Por lo menos a mi me resulto en IE5 y en lE6 no toma para nada el script. Pero funciona en algunos. Lo revise en http://browsershots.org/
¡ Me resulto ! , pero tengo que dar la dirección completa de la foto (http://www.elsitio.com/galeria/foto.png). Eso
si funciona pero al momento de poner enlaces dentro del div ya no funciona los enlaces… alguien tiene la solucion!!!! ??
Hola a tod@s!
A mi me funciona correctamente, pero hay un detalle que no consigo. Tengo una imagen png de fondo de un DIV. Esta imagen es más pequeña que el ancho del DIV entonces quiero que no se repita y que se centre. Eso lo consigo en la etiqueta background para Firefox, ¿pero donde le indico esos atributos para IE?
Gracias!!
Victor Humanes, no te sirve background-position: center center? o lo q es lo mismo background-position:: 50% 50%
Hola que tal un saludo,yo eh estadoi trabajando con los png, tengo un problema con los link que aun no se como solucionar, miren tengo un div contedor con un fondo png semi-tranparente que ocupa casi toda la pagina, el problema que tengo es que dentro de ese contenedor tengo unos links que en ie6 no funcionan, ya me canse de buscar y no encuentro una solucion, saben de alguna????”’
¿y qué sucede si la imagen es una “list-style-image”?
Fernando: postea algun link en los foros para ver q esta pasando.. asi como explicas me cuesta imaginarlo. dani: solo con background-image….. saludos.
Gracias, ya encontre el problema, consiste el colocar una imagen .gif transparente al frente (trasparente.gif) y luego la que queremos que se vea (imagen.png), asi fue que me funcionó, de resto siempre me mostraba la imagen sin trasparencia o me dejaban de funcionar los inputs y links,
hay que colocar las medidas de la imagen a mostrar porque si no se colocan tomará las medidas de la imagen transparente,
<img src=”trasparente.gif” width=”100″ height=”100″ style=”filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’imagen.png’, sizingMethod=’scale’);” alt=”">
saludos recientemente me he encontrado con el problema y si se puede arreglar. En mi caso especifico me queda una duda, tengo que hace unos boletines y de cara al diseño necesitaria poder meterlo todo dentro de la etiqueta de mi html, osea por requerimientos de una aplicacion solo puedo rellenar el body de mi Html. Me gustaria saber si desde el codigo html puedo meter ese CSS como valor del atributo “style”. Un añadido es que tampoco puedo usar java script.
Gracias por adelantado, de todas formas ya me habeis salvado la vida.
Cojonudo tÃo. Me salvaste la vida.
Funciona de la óstia!!! Gracias!!!!
Me parece genial la verdad que el tema de los PNG y las deficiencias de IE molestgan a todos el vernos obligados a usar un PNGFIX por el IE 6 y lineas de código para los fondos cuando la solución simplemente serÃa erradicar el IE6 y de pasadita si se pede todos las demás versiones.
Tienen razón, valida el XHTML:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.csslab.cl%2Fejemplos%2Fpng%2Findex.html&charset=%28detect+automatically%29&doctype=Inline&group=0
Pero el validador CSS de la W3C no lo valida:
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.csslab.cl%2Fejemplos%2Fpng%2Findex.html&profile=css21&usermedium=all&warning=1&lang=es
Que inútiles los de Microsoft. De todos modos según YouTube el Explorer 6 es obsoleto.
No me funciona!, aunque debo decir que lo estoy viendo en IE 6 corriendo bajo Darwine en Mac OS. Sólo se ve toda la página en rojo. Me molesta este tema de los png’s para IE porque ni siquiera tengo las herramientas para corregirlas. Maldición, ayuda!!
Josef: lamentblemente tendras q probarlo en un PC con Win y IE6 ya q con Wine no podras verlo funcionando; tb tengo lo mismo y no es posible.
Saludos.
Para quienes les desaparece el resto del contenido del div, como a Rafael. Intenten con sizingMethod=’crop’:
ej: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’estilo/pics/ayuda_mini.png’,sizingMethod=’crop’);
A mi me funcionó asà en IE6
Para los que no les funciona de frentón: Si están haciendo copy/paste, asegurense de que no hayan ‘ ` ‘ en el código. Las comillas dentro de la url mejor no ponerlas y las que van desntro de la invocación al filtro deben ser ‘ ‘ ‘ .
Saludos
Hola a todos!!! he probado el enlace de “ver resultado” para probar el efecto del script de arriba y en todo funciona perfecto pero al ponerlo en el IEtester en IE6 solo veo el fondo ¿es que cambió algo en IE6?? en mi código me pasa exactamente lo mismo, se ve únicamente el fondo. }
El código es el mismno que el de arriba, cuide de cambiar la ruta para el filtro y que sea desde la raiz y se nota que me coge el filtro porque desaparecen, antes me los mostraba grises (son unos degradados grices trasparentes). Probé con PNG 8, PNG 24 (que me salÃan negros) y con PNG 32 y nada.
Muchas gracias y saludos
modeff: con ningun IETester podras visualizarlo, ya q solo emulan el comportamiento del motor de IE6 y no su totalidad; deberas probarlo en una instalacion de este browser.
Suerte!