Re: [Ovillo] PNG con trasnparencia (canal alpha) en IE 6 einferiores
Retomando este tema... una solución menos traumática -al menos para mi- ha sido en estos dias aplicar una solución para un tema similar, pero utilizando toda una página transparente, usando para ello 2 DIVS y código CSS. Un DIV será el contenedor de la Imagen y otro DIV que sera el contenedor del texto y aplicará la opacidad a la imagen del fondo. Ambos DIVs estan definidos con el mismo ancho y altura que la imagen (importante). CSS #bgContainer { width400px; height:auto; background:url (images/fondo.jpg); } #opacity { padding:0px; width:400px; height:auto; background:white; margin:0 auto; filter:alpha(opacity=80); -moz-opacity:.80; opacity:.80; } O INCRUSTADO EN LA PAGINA div style=width:400px;height:159px;background:url (images/monday.jpg) top left repeat; div style=padding:0px; width:400px; height:159px; color:black; background:white; margin-right:0px; filter:alpha(opacity=50); -moz-opacity:.50; opacity:.50; font-size:normal; font-weight:bolder; p style=padding-left:10px;padding-right:10px; TEXTO /p /div/div div style=clear:both;/div Se aprecia en IE8, IE7, IE6, MAC, Linux, y porsupuesto Mozilla Firefox. Más triquiñielas en: http://www.mandarindesign.com/troops.html#magazinedropcaps Saludos cordiales! Miguel Flores Franco Pixelperú - Arte y diseño web basado en estándares http://www.pixelperu.net Telf.: + 511 5665116 . Cel. +511 99392 8921 MSN:mi...@pixelperu.net - Original Message - From: Carlos García-Olalla carlos.garciaola...@gmail.com To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Sent: Tuesday, October 07, 2008 6:31 AM Subject: Re: [Ovillo] PNG con trasnparencia (canal alpha) en IE 6 einferiores Yo te recomiendo pasar la imagen a GIF, no es un estándar W3C perose ve perfectamente con transparencia en IE6 y otros. Por lo menos mientras se siga utilizando tanto IE6 para nuestra desgracia. Creo que es la solución menos problemática y más sencilla. El 4 de octubre de 2008 11:06, Jorge venwit...@hotmail.com escribió: Gracias a t...@s por contestar, al final lo resolvi como dice Gab en el post del 23 de Julio de 2007 http://www.daltonlp.com/view/217 No sé cual método es mejor, el que dice Almorca o ese en que se dice que la solución es hacer una hoja de estilo diferente para los ie 6. trans_box2 { font-family:verdana; font-weight:bold; padding:40px; margin:30px; border:solid 1px #555; /* Mozilla ignores crazy MS image filters, so it will skip the following */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/75p_honey.png'); } /* IE ignores styles with [attributes], so it will skip the following. */ trans_box2[class] { background-image:url(/75p_honey.png); } div style=float:left;background-image:url(/flowers.jpg);border:solid 1px #000;padding:10px; div class=trans_box1 style=float:left; I like flowers. /div div class=trans_box1 style=float:left; They smell nice. /div div class=trans_box2 style=float:left; a href=http://www.google.com/search?q=flowers+bees+honey;When combined with bees, they make honey.../a /div Comment by Gab posted Jul 23, 2007 Nice. Almost perfect. Only problem is that IE7 will load the background 2 times, as it doesn't ignore .trans_box2[class]. This is not a big deal in this case, but it was for me. What I did was create a perfectly normal stylesheet with no hacks. I used ID selectors to apply my background image, like I normally would. IE6 and below won't display the PNGs properly using this stylesheet. Next I linked a second stylesheet (containing the PNG fix codes) to my page. So that the browsers apply both stylesheets at the same time, we need to apply an identical title attribute to both these styles. Now since I only wanted IE6 and below to use the second stylesheet, I applied IE's conditional comments for the second stylesheet (http://www.quirksmode.org/css/condcom.html) The last thing to do was add background: none !important; to the div containing the background image in the second stylesheet, so that the background image only shows for the class selector (fixed PNG) and not the ID selector. So basically I can now style any div normally using IDs, and if it happens to contain a PNG background, I just add the class that will be used in the second stylesheet to it, and in the second stylesheet add the ID containing the PNG. A lot less complicated imo. - Mensaje original - De: Almorca almo...@gmail.com Para: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Enviado: viernes, 03 de octubre de 2008 22:54 Asunto: Re: [Ovillo] PNG con trasnparencia (canal alpha) en IE 6 einferiores http://www.anieto2k.com/2006/08/28/png-internet-explorer-soluciones-varias/te ayudará. Lo que tienes que usar es este código: background-image: url(trasparente.png)!important; background-image: none; filter: none !important; filter
Re: [Ovillo] PNG con trasnparencia (canal alpha) en IE 6 einferiores
Yo te recomiendo pasar la imagen a GIF, no es un estándar W3C perose ve perfectamente con transparencia en IE6 y otros. Por lo menos mientras se siga utilizando tanto IE6 para nuestra desgracia. Creo que es la solución menos problemática y más sencilla. El 4 de octubre de 2008 11:06, Jorge [EMAIL PROTECTED] escribió: Gracias a [EMAIL PROTECTED] por contestar, al final lo resolvi como dice Gab en el post del 23 de Julio de 2007 http://www.daltonlp.com/view/217 No sé cual método es mejor, el que dice Almorca o ese en que se dice que la solución es hacer una hoja de estilo diferente para los ie 6. trans_box2 { font-family:verdana; font-weight:bold; padding:40px; margin:30px; border:solid 1px #555; /* Mozilla ignores crazy MS image filters, so it will skip the following */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/75p_honey.png'); } /* IE ignores styles with [attributes], so it will skip the following. */ trans_box2[class] { background-image:url(/75p_honey.png); } div style=float:left;background-image:url(/flowers.jpg);border:solid 1px #000;padding:10px; div class=trans_box1 style=float:left; I like flowers. /div div class=trans_box1 style=float:left; They smell nice. /div div class=trans_box2 style=float:left; a href=http://www.google.com/search?q=flowers+bees+honey;When combined with bees, they make honey.../a /div Comment by Gab posted Jul 23, 2007 Nice. Almost perfect. Only problem is that IE7 will load the background 2 times, as it doesn't ignore .trans_box2[class]. This is not a big deal in this case, but it was for me. What I did was create a perfectly normal stylesheet with no hacks. I used ID selectors to apply my background image, like I normally would. IE6 and below won't display the PNGs properly using this stylesheet. Next I linked a second stylesheet (containing the PNG fix codes) to my page. So that the browsers apply both stylesheets at the same time, we need to apply an identical title attribute to both these styles. Now since I only wanted IE6 and below to use the second stylesheet, I applied IE's conditional comments for the second stylesheet (http://www.quirksmode.org/css/condcom.html) The last thing to do was add background: none !important; to the div containing the background image in the second stylesheet, so that the background image only shows for the class selector (fixed PNG) and not the ID selector. So basically I can now style any div normally using IDs, and if it happens to contain a PNG background, I just add the class that will be used in the second stylesheet to it, and in the second stylesheet add the ID containing the PNG. A lot less complicated imo. - Mensaje original - De: Almorca [EMAIL PROTECTED] Para: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Enviado: viernes, 03 de octubre de 2008 22:54 Asunto: Re: [Ovillo] PNG con trasnparencia (canal alpha) en IE 6 einferiores http://www.anieto2k.com/2006/08/28/png-internet-explorer-soluciones-varias/te ayudará. Lo que tienes que usar es este código: background-image: url(trasparente.png)!important; background-image: none; filter: none !important; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imagen/trasparente.png'); Si quieres algo más general (que funcione con todos los png de tu web) puedes usar http://labs.unitinteractive.com/unitpngfix.php 2008/10/3 Alejandro Jorge [EMAIL PROTECTED] Hola, tengo un contenedor con una imagen de fondo y dentro de éste tengo otro que tiene una imagen png con transparencia, por lo que me permite ver el fondo del elemento que lo contiene. El caso es que en IE 7 o en Firefox se ve perfecto, pero en IE 6 (no se en la 5) no funciona. Hay alguien que sepa como hacerlo sin usar javascript, o el metodo mas accesible posible. Seguro que de esto ya se ha hablado en la lista.. Gracias y saludos. _ ¿Sigue el calor? Consulta MSN El tiempo http://eltiempo.es.msn.com/ ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo -- We don't need no education - Pink Floyd ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] PNG con trasnparencia (canal alpha) en IE 6 einferiores
para las transparencias en IE6 yo tengo la solucion agregando un js, simplemente agregas ese js, y cambias el nombre de la foto por ej: foto1.png-trans.png osea le agregas -trans.png, lo cambias en el css y en todos los sitios donde se llame a la imagen, y 100% funciona seguro, sé que no hay mucha gente partidaría de utilizar js, pero para mi este trukillo es perfecto, si a alguien le interesa que me lo diga y le mando el link del js. El mar, 07-10-2008 a las 13:31 +0200, Carlos García-Olalla escribió: Yo te recomiendo pasar la imagen a GIF, no es un estándar W3C perose ve perfectamente con transparencia en IE6 y otros. Por lo menos mientras se siga utilizando tanto IE6 para nuestra desgracia. Creo que es la solución menos problemática y más sencilla. El 4 de octubre de 2008 11:06, Jorge [EMAIL PROTECTED] escribió: Gracias a [EMAIL PROTECTED] por contestar, al final lo resolvi como dice Gab en el post del 23 de Julio de 2007 http://www.daltonlp.com/view/217 No sé cual método es mejor, el que dice Almorca o ese en que se dice que la solución es hacer una hoja de estilo diferente para los ie 6. trans_box2 { font-family:verdana; font-weight:bold; padding:40px; margin:30px; border:solid 1px #555; /* Mozilla ignores crazy MS image filters, so it will skip the following */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/75p_honey.png'); } /* IE ignores styles with [attributes], so it will skip the following. */ trans_box2[class] { background-image:url(/75p_honey.png); } div style=float:left;background-image:url(/flowers.jpg);border:solid 1px #000;padding:10px; div class=trans_box1 style=float:left; I like flowers. /div div class=trans_box1 style=float:left; They smell nice. /div div class=trans_box2 style=float:left; a href=http://www.google.com/search?q=flowers+bees+honey;When combined with bees, they make honey.../a /div Comment by Gab posted Jul 23, 2007 Nice. Almost perfect. Only problem is that IE7 will load the background 2 times, as it doesn't ignore .trans_box2[class]. This is not a big deal in this case, but it was for me. What I did was create a perfectly normal stylesheet with no hacks. I used ID selectors to apply my background image, like I normally would. IE6 and below won't display the PNGs properly using this stylesheet. Next I linked a second stylesheet (containing the PNG fix codes) to my page. So that the browsers apply both stylesheets at the same time, we need to apply an identical title attribute to both these styles. Now since I only wanted IE6 and below to use the second stylesheet, I applied IE's conditional comments for the second stylesheet (http://www.quirksmode.org/css/condcom.html) The last thing to do was add background: none !important; to the div containing the background image in the second stylesheet, so that the background image only shows for the class selector (fixed PNG) and not the ID selector. So basically I can now style any div normally using IDs, and if it happens to contain a PNG background, I just add the class that will be used in the second stylesheet to it, and in the second stylesheet add the ID containing the PNG. A lot less complicated imo. - Mensaje original - De: Almorca [EMAIL PROTECTED] Para: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Enviado: viernes, 03 de octubre de 2008 22:54 Asunto: Re: [Ovillo] PNG con trasnparencia (canal alpha) en IE 6 einferiores http://www.anieto2k.com/2006/08/28/png-internet-explorer-soluciones-varias/te ayudará. Lo que tienes que usar es este código: background-image: url(trasparente.png)!important; background-image: none; filter: none !important; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imagen/trasparente.png'); Si quieres algo más general (que funcione con todos los png de tu web) puedes usar http://labs.unitinteractive.com/unitpngfix.php 2008/10/3 Alejandro Jorge [EMAIL PROTECTED] Hola, tengo un contenedor con una imagen de fondo y dentro de éste tengo otro que tiene una imagen png con transparencia, por lo que me permite ver el fondo del elemento que lo contiene. El caso es que en IE 7 o en Firefox se ve perfecto, pero en IE 6 (no se en la 5) no funciona. Hay alguien que sepa como hacerlo sin usar javascript, o el metodo mas accesible posible. Seguro que de esto ya se ha hablado en la lista.. Gracias y saludos. _ ¿Sigue el calor? Consulta MSN El tiempo http://eltiempo.es.msn.com/ ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente
Re: [Ovillo] PNG con trasnparencia (canal alpha) en IE 6 einferiores
Gracias a [EMAIL PROTECTED] por contestar, al final lo resolvi como dice Gab en el post del 23 de Julio de 2007 http://www.daltonlp.com/view/217 No sé cual método es mejor, el que dice Almorca o ese en que se dice que la solución es hacer una hoja de estilo diferente para los ie 6. trans_box2 { font-family:verdana; font-weight:bold; padding:40px; margin:30px; border:solid 1px #555; /* Mozilla ignores crazy MS image filters, so it will skip the following */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/75p_honey.png'); } /* IE ignores styles with [attributes], so it will skip the following. */ trans_box2[class] { background-image:url(/75p_honey.png); } div style=float:left;background-image:url(/flowers.jpg);border:solid 1px #000;padding:10px; div class=trans_box1 style=float:left; I like flowers. /div div class=trans_box1 style=float:left; They smell nice. /div div class=trans_box2 style=float:left; a href=http://www.google.com/search?q=flowers+bees+honeygt;When combined with bees, they make honey.../a /div Comment by Gab posted Jul 23, 2007 Nice. Almost perfect. Only problem is that IE7 will load the background 2 times, as it doesn't ignore .trans_box2[class]. This is not a big deal in this case, but it was for me. What I did was create a perfectly normal stylesheet with no hacks. I used ID selectors to apply my background image, like I normally would. IE6 and below won't display the PNGs properly using this stylesheet. Next I linked a second stylesheet (containing the PNG fix codes) to my page. So that the browsers apply both stylesheets at the same time, we need to apply an identical title attribute to both these styles. Now since I only wanted IE6 and below to use the second stylesheet, I applied IE's conditional comments for the second stylesheet (http://www.quirksmode.org/css/condcom.html) The last thing to do was add background: none !important; to the div containing the background image in the second stylesheet, so that the background image only shows for the class selector (fixed PNG) and not the ID selector. So basically I can now style any div normally using IDs, and if it happens to contain a PNG background, I just add the class that will be used in the second stylesheet to it, and in the second stylesheet add the ID containing the PNG. A lot less complicated imo. - Mensaje original - De: Almorca [EMAIL PROTECTED] Para: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Enviado: viernes, 03 de octubre de 2008 22:54 Asunto: Re: [Ovillo] PNG con trasnparencia (canal alpha) en IE 6 einferiores http://www.anieto2k.com/2006/08/28/png-internet-explorer-soluciones-varias/te ayudará. Lo que tienes que usar es este código: background-image: url(trasparente.png)!important; background-image: none; filter: none !important; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imagen/trasparente.png'); Si quieres algo más general (que funcione con todos los png de tu web) puedes usar http://labs.unitinteractive.com/unitpngfix.php 2008/10/3 Alejandro Jorge [EMAIL PROTECTED] Hola, tengo un contenedor con una imagen de fondo y dentro de éste tengo otro que tiene una imagen png con transparencia, por lo que me permite ver el fondo del elemento que lo contiene. El caso es que en IE 7 o en Firefox se ve perfecto, pero en IE 6 (no se en la 5) no funciona. Hay alguien que sepa como hacerlo sin usar javascript, o el metodo mas accesible posible. Seguro que de esto ya se ha hablado en la lista.. Gracias y saludos. _ ¿Sigue el calor? Consulta MSN El tiempo http://eltiempo.es.msn.com/ ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo -- We don't need no education - Pink Floyd ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] PNG con trasnparencia (canal alpha) en IE 6 einferiores
Los dos métodos se basan en lo mismo, usar los filtros de ie. Si solo tienes una imagen transparente esta es la mejor opción, si tienes muchas ya tienes que recurrir a javascript para automatizar el proceso. Lo que yo cambiaría es que crearía una hoja de estilos con los *hack* de ie6 y la enlazaría mediante comentarios condicionales en el html para así no tener el código más organizado y cargar de menos trabajo a los navegadores que si cumplen los estándares. El 4 de octubre de 2008 11:06, Jorge [EMAIL PROTECTED] escribió: Gracias a [EMAIL PROTECTED] por contestar, al final lo resolvi como dice Gab en el post del 23 de Julio de 2007 http://www.daltonlp.com/view/217 No sé cual método es mejor, el que dice Almorca o ese en que se dice que la solución es hacer una hoja de estilo diferente para los ie 6. trans_box2 { font-family:verdana; font-weight:bold; padding:40px; margin:30px; border:solid 1px #555; /* Mozilla ignores crazy MS image filters, so it will skip the following */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/75p_honey.png'); } /* IE ignores styles with [attributes], so it will skip the following. */ trans_box2[class] { background-image:url(/75p_honey.png); } div style=float:left;background-image:url(/flowers.jpg);border:solid 1px #000;padding:10px; div class=trans_box1 style=float:left; I like flowers. /div div class=trans_box1 style=float:left; They smell nice. /div div class=trans_box2 style=float:left; a href=http://www.google.com/search?q=flowers+bees+honey;When combined with bees, they make honey.../a /div Comment by Gab posted Jul 23, 2007 Nice. Almost perfect. Only problem is that IE7 will load the background 2 times, as it doesn't ignore .trans_box2[class]. This is not a big deal in this case, but it was for me. What I did was create a perfectly normal stylesheet with no hacks. I used ID selectors to apply my background image, like I normally would. IE6 and below won't display the PNGs properly using this stylesheet. Next I linked a second stylesheet (containing the PNG fix codes) to my page. So that the browsers apply both stylesheets at the same time, we need to apply an identical title attribute to both these styles. Now since I only wanted IE6 and below to use the second stylesheet, I applied IE's conditional comments for the second stylesheet (http://www.quirksmode.org/css/condcom.html) The last thing to do was add background: none !important; to the div containing the background image in the second stylesheet, so that the background image only shows for the class selector (fixed PNG) and not the ID selector. So basically I can now style any div normally using IDs, and if it happens to contain a PNG background, I just add the class that will be used in the second stylesheet to it, and in the second stylesheet add the ID containing the PNG. A lot less complicated imo. - Mensaje original - De: Almorca [EMAIL PROTECTED] Para: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Enviado: viernes, 03 de octubre de 2008 22:54 Asunto: Re: [Ovillo] PNG con trasnparencia (canal alpha) en IE 6 einferiores http://www.anieto2k.com/2006/08/28/png-internet-explorer-soluciones-varias/te ayudará. Lo que tienes que usar es este código: background-image: url(trasparente.png)!important; background-image: none; filter: none !important; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imagen/trasparente.png'); Si quieres algo más general (que funcione con todos los png de tu web) puedes usar http://labs.unitinteractive.com/unitpngfix.php 2008/10/3 Alejandro Jorge [EMAIL PROTECTED] Hola, tengo un contenedor con una imagen de fondo y dentro de éste tengo otro que tiene una imagen png con transparencia, por lo que me permite ver el fondo del elemento que lo contiene. El caso es que en IE 7 o en Firefox se ve perfecto, pero en IE 6 (no se en la 5) no funciona. Hay alguien que sepa como hacerlo sin usar javascript, o el metodo mas accesible posible. Seguro que de esto ya se ha hablado en la lista.. Gracias y saludos. _ ¿Sigue el calor? Consulta MSN El tiempo http://eltiempo.es.msn.com/ ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo -- We don't need no education - Pink Floyd ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista