Hola de nuevo :
Vuelvo para corregir y agregar algunos datos.
En el mensaje
#9,
ericktoti propuso un método para transparentar un contenedor y no su contenido. No sé cómo lo habré probado que quedé convencido de que funcionaba en
Firefox. Pero no lo hace, es solamente para
IE.
Aún no me respondieron si el problema del canal alfa es con el
IExplorer y nada más; como no encontré quejas de otro navegador, supongo que sí; por lo que sigue siendo válida la sugerencia de usar un fondo *.png para todos y forzar la transparencia con
alpha opacity para el de
Microsoft. Aunque aparecen algunos problemas que voy a detallar más abajo.
En el mensaje
#6 dije que el código puesto por
Defero.tk (mensaje
#3) no funcionaba en
background , lo que olvidé mencionar es que se puede corregir facilmente aplicando el filtro al contenedor y no a la imagen. En el tema
Tablas tranparentes y Contenido 100% Visible hay un enlace donde se lo puede ver funcionando. También se puede ver allí otro ejemplo de *.gif semitransparente y un comentario muy oportuno de
RoQ Cita: ...Lo que mtv.es usa para las transparencias es una imagen PNG de 1x1 como imagen de fondo que se repite, y para que funcione en IE usa javascript, prueba desactivando javascript en IE y vas a ver como ya no hay transparencias...
Si lo pensamos un poco, no hay ninguna necesidad de usar JS para transparentar fondos, se puede hacer muy bien con CSS. Lo que vamos a necesitar son algunos
hacks ya que el
IE7 (creo) reconoce bien canales alfa, el
IE6 solamente con
AlphaImageLoader y el
IE5 ni a palos.
Me gustaría que alguien que sepa de diseño me corrija, pero creo que en un *.png se puede aplicar el canal alfa a cualquier color a partir de los 24 bits, por lo que si la imagen es de un color parejo con transparencia el problema se soluciona bastante bien; pero si se aplica a un componente del color, la imagen se va a ver distinta en
IE5, y con aplicarle un
alpha opacity no lo arreglamos; tendríamos que quitar la imagen y generar el color más parecido con
background-color antes de darle la transparencia.
El problema se entiende claramente si imaginamos un fondo degradado (p.e.) de azul a rojo. Si hacemos transparente el azul la imagen nos queda con una transición de rojo a transparente, pero en los navegadores viejos se verá claramente el azul. Ésto también lo podríamos corregir usando filtros, siempre que la versión del DX no sea tan vieja como el navegador.
En
IE5.5 anda el filtro
gradient (
superponer dos fondos) pero tampoco arreglaría una imagen que tenga un dibujo con bordes degradados, o con una "ventanita" semitransparente.
En el tema
PNG e IE. Pregunta se propone usar un
hack para cambiar la imagen *.png por una *.gif cuando sea necesaria; y el que lo vea mal que se embrome por usar
IE.
Aquí dejo un par de ejemplos más
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><title>FONDO SEMITRANSPARENTE PNG.</title>
<style type="text/css">
body {background:url(http://www.forosdelweb.com/images/statusicon/forum_old.gif) fixed red; font-size:100%; }
.bravo {font: bold 3em/4.5em helvetica, tahoma, sans-serif; padding:0; width:10em; margin:300px 10% 400px 10%; background-image: url("http://img72.imageshack.us/img72/2408/semitrans017oh.png"); background-repeat:repeat; border:0.5em solid gold; }
.delta {color:#ffffff; background-color:transparent; font: bold 24px/50px helvetica, tahoma, sans-serif; padding:0; height:100px; margin:300px 0 400px 0; background-image: url("http://img72.imageshack.us/img72/5572/degrad018my.png"); background-repeat:repeat-x; text-align:center; border:1px solid red;}
.charly {width:10em; height:4.5em; color:#cc9900; padding:0; position:relative; }
.eco {position:relative; }
</style>
</head >
<body>
<!--[if IE]>
<style>
.bravo { background-color:transparent; background-image:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( enabled:"true", src="http://img72.imageshack.us/img72/2408/semitrans017oh.png", sizingMethod="scale"); }
.delta { background-color:transparent; background-image:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( enabled:"true", src="http://img72.imageshack.us/img72/5572/degrad018my.png", sizingMethod="scale"); }
</style>
<![endif]-->
<!--[if gte IE 7.0000]>
<style>
.bravo { background-color:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( enabled:"false", ); background-image:url("http://img72.imageshack.us/img72/2408/semitrans017oh.png"); }
.delta { background-color:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( enabled:"false", ); background-image:url("http://img72.imageshack.us/img72/5572/degrad018my.png"); }
</style>
<![endif]-->
<!--[if lt IE 6.0000]>
<style>
.bravo { filter:alpha(opacity=40); background-color:#0000ff; background-image:none; border:none; }
.delta { display:block; filter:alpha(style=1 opacity=0 finishOpacity=100 startx=100 starty=100 finishX=100 finishY=0); background-color:#666699; background-image:none; }
.charly {border:0.5em solid gold; }
</style>
<![endif]-->
<h3>INICIO</h3>
<div class="bravo" ><div class="charly">
<div>QWERTYUIOP</div>
</div></div>
<p class="delta" ><span class="eco">
Texto Texto Texto Texto QWERTYUIOP Texto Texto Texto Texto </span>
</p>
<h3>FIN</h3>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
</p>
</body>
</html>
Las imágenes son :
__ 
[edit]
Un dato más
Cita:
Iniciado por Tollelle ...No puedo , ni pinxar sobre enlaces, ni escribin en formularios directamente (tengo qusar el TAB para acceder a los campos)...
http://www.tripix.net/?p=36 http://www.daltonlp.com/daltonlp.cgi...=1&item_id=217 [/edit]