Foros del Web » Creando para Internet » CSS »

Imagenes png con filtro "alpha" en IE

Estas en el tema de Imagenes png con filtro "alpha" en IE en el foro de CSS en Foros del Web. Saludos! Como la mayoria ya sabe, en IE las imagenes png que tienen filtros "alpha" (secciones con transparencia) no las expone tal como deven ser, ...
  #1 (permalink)  
Antiguo 22/07/2008, 22:08
Avatar de Atomycko  
Fecha de Ingreso: diciembre-2005
Ubicación: Zapopan Jal.
Mensajes: 92
Antigüedad: 18 años, 3 meses
Puntos: 12
Pregunta Imagenes png con filtro "alpha" en IE

Saludos!

Como la mayoria ya sabe, en IE las imagenes png que tienen filtros "alpha" (secciones con transparencia) no las expone tal como deven ser, amenos claro que hagas algo como esto:

Un archivo .htc llamado "pngbehavior" (pngbehavior.htc) con el siguiente codigo
Cita:
<public:component><public:attach event="onpropertychange" onevent="propertyChanged()" /><script>

/// Autor: no se
/// No recuerdo de donde saque este script, zorry :P
/// pero mio no es

var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
var realSrc;
var blankSrc = "blank.gif";
if(supported) fixImage();
function propertyChanged(){
if (!supported) return;
var pName = event.propertyName;
if(pName != "src") return;
if( ! new RegExp(blankSrc).test(src))
fixImage();
};
function fixImage(){
var src = element.src;
if(src == realSrc){
element.src = blankSrc;
return;
}
if( ! new RegExp(blankSrc).test(src)){
realSrc = src;
}
if( /\.png$/.test( realSrc.toLowerCase() ) ){
element.src = blankSrc;
element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoade r(src='" + src + "',sizingMethod='scale')";
}else{
element.runtimeStyle.filter = "";
}
}
</script></public:component>
Y agregar el estilo dentro del HEAD de tu pagina asi:
Cita:
<style type="text/css" media="screen">.png { behavior:url("pngbehavior.htc"); }</style>
Ya solo queda agregar la clase del estilo a tu imagen
Nota: para esta funcion es nescesario darle el ancho y alto a la imagen
Cita:
<img src="imagenes/imagen.png" class="png" width="20" height="20">
Ok, hasta aqui ya esta resuelto este problema... ahora, como hacer para aplicar esta funcion, pero en una imagen de fondo?

Por ejemplo:
Cita:
<style>.bgpng{ background:url(imagenes/imagen.png); }</style>
Como aplicar aqui la funcion de transparencia?

De antemano muchas gracias por cualquier solucion que puedan darme
__________________
PD: Los acentos fueron secuestrados.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:12.