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:
>
> 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 <venwit...@hotmail.com>
>
> >
> > 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
>
_______________________________________________
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
