Transparencia de PNG en IE8

Question

Tengo problemas con una imagen PNG transparente que muestra artefactos de píxeles negros difuminados alrededor del borde de la parte no transparente de la imagen. Sólo se hace esto en Internet Explorer y sólo lo hace a partir de un archivo JavaScript que se utiliza en.

Aquí es lo que estoy hablando ... http://70.86.157.71/test/test3.htm (enlace muerto) ... notar la chica de la esquina inferior derecha. Ella tiene artefactos a su alrededor en IE8 (no lo he probado en versiones anteriores de IE, pero supongo que probablemente haga lo mismo). Funciona perfectamente en Firefox y Chrome. La imagen se carga desde un archivo Javascript para producir el efecto mouseover.

Si carga la imagen por sí solo, funciona bien. Aquí está la imagen ... http://70.86.157.71/test/consultant2.png

¿Alguien sabe cómo solucionarlo?

La imagen fue producida en Photoshop CS3.

He leído cosas sobre la eliminación de Gama, pero eso aparentemente estaba en versiones anteriores de Photoshop y cuando lo cargo en TweakPNG, no tiene Gama.

Por favor ayuda!

Answer 1

Solo quiero agregar (ya busqué en Google para este problema, y ​​esta pregunta apareció primero) IE6 y otras versiones hacen que la transparencia PNG sea muy fea. Si tiene una imagen PNG que es transparente alfa (32 bits) y desea mostrarla sobre algún fondo complejo, nunca puede hacer esto simplemente en IE. Pero puede mostrarlo correctamente sobre un único fondo de color siempre que configure ese atributo CSS de imágenes PNG (o divs) background-color para que sea el mismo que el de los padres background-color.

Así que esto convertirá negro donde la imagen debe ser alfa transparente y transparente en el byte de alfa es 0:

<div style="background-color: white;">  
    <div style="background-image: url(image.png);"/>  
</div> 

y esto va a representar correctamente (tenga en cuenta el atributo background-color en el div interior) :

<div style="background-color: white;">  
    <div style="background-color: white; background-image: url(image.png);"/>  
</div> 

alternativa Complex a esta que permite imagen alfa sobre un fondo complejo es utilizar AlphaImageLoader para cargar y de procesamiento de imagen de la cierta opacidad. Esto funciona hasta que desee cambiar esa opacidad ... Puede encontrar el problema en detalle y su solución (javascript) HERE.

Answer 2

¡CORREGIDO!

He estado luchando con el mismo problema, ¡y acabo de tener un gran avance! Hemos establecido que si le da a la imagen un color de fondo o una imagen, la png se muestra correctamente encima de ella. El borde negro se ha ido, pero ahora tienes un fondo opaco, y eso prácticamente frustra el propósito.

Luego recordé un convertidor de rgba a ie filtro que encontré. (Gracias a Michael Bester). Así que me preguntaba qué pasaría si me dio mi problema PNG es decir un filtrado emulando RGBA fondo (255,255,255,0), esperando que no funcione, pero vamos a tratar de todos modos ...

.item img { 
    background: transparent; 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE6 & 7 */  
    zoom: 1; 

} 

Presto! Adiós negro, y hola trabajando canales alfa en ie7 y 8.Desvanece tus pngs hacia adentro y hacia afuera, o anímalos a través de la pantalla; todo está bien.

Answer 3

Pongo esto en un plugin de jQuery para que sea más modular (que proporciona el gif transparente):

$.fn.pngFix = function() { 
    if (!$.browser.msie || $.browser.version >= 9) { return $(this); } 

    return $(this).each(function() { 
    var img = $(this), 
     src = img.attr('src'); 

    img.attr('src', '/images/general/transparent.gif') 
     .css('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + src + "')"); 
    }); 
}; 

Uso:

$('.my-selector').pngFix(); 

Nota: Funciona también si las imágenes son de fondo imágenes. Solo aplica la función en el div.

Answer 4

La reparación de Dan Tello funcionó bien para mí.

Un problema adicional que encontré con IE8 fue que si el PNG se sostuvo en un DIV con ancho de CSS más pequeño o dimensiones de altura que el PNG, el problema de borde negro se volvió a desencadenar.

Corregir el ancho y alto CSS o eliminarlos por completo fijos.

Answer 5

PNG transparency prоblеm in IE8

solución de Dan trabajó para mí. Estaba intentando desvanecer un div con una imagen de fondo. Advertencias: no se puede desvanecer el div directamente, sino que se desvanece una imagen de envoltura. Además, agregue los siguientes filtros para aplicar una imagen de fondo:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png')"; /* IE8 */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png'); /* IE6 & 7 */  

Tenga en cuenta que las rutas en los atributos src de los filtros son absolutos, y no en relación con la hoja de css.

También he añadido:

background: transparent\9; 

Esto hace que IE caso omiso de mi declaración anterior de la imagen de fondo real de los otros navegadores.

Gracias Dan !!!

Answer 6

Mi escenario:

• Yo tenía una imagen de fondo que tenía un png alfa de 24 bits que se establece en un enlace ancla.
• El ancla estaba siendo desvanecida al pasar el mouse sobre Jquery.

por ejemplo.

a.button { background-image: url(this.png; } 

Descubrí que la aplicación del marcado proporcionado por Dan Tello no funcionaba.

Sin embargo, colocando un tramo dentro del elemento de anclaje y configurando la imagen de fondo para ese elemento, pude lograr un buen resultado utilizando el marcado de Dan Tello.

por ejemplo.

a.button span { background-image: url(this.png; } 

Answer 7

utilizo una solución CSS en lugar de JS para solucionar mi ronda capa arrinconado con PNG transparente dentro

Trate

 
.ie .whateverDivWrappingTheImage img { 
background: #ffaabb; /* this should be the background color matching your design actually */ 
filter: chroma(#ffaabb); /* and this should match whatever value you put in background-color */ 
} 

Esto puede requerir más trabajo en IE9 o posterior.

Answer 8

Tuve lo mismo que un PNG con transparencia que se configuró como la imagen de fondo de un elemento <A> con la opacidad aplicada.

La solución fue establecer el color de fondo del elemento <A>.

Por lo tanto, el siguiente:

filter: alpha(opacity=40); 
-moz-opacity: 0.4; 
-khtml-opacity: 0.4; 
opacity: 0.4; 
background-image: ...; 

se convierte en:

/* "Overwritten" by the background-image. However this fixes the IE7 and IE8 PNG-transparency-plus-opacity bug. */ 
background-color: #FFFFFF; 

filter: alpha(opacity=40); 
-moz-opacity: 0.4; 
-khtml-opacity: 0.4; 
opacity: 0.4; 
background-image: ...; 

Answer 9

Sé que este mensaje ha sido muerto algún tiempo, pero aquí es otra respuesta a la vieja IE8 png tema de fondo.

Puede hacerlo en CSS mediante el uso del sistema de filtración exclusivo de IE como esto, así:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src='pathToYourPNG');

DEMO

tendrá que utilizar un blank.gif para la 'primera 'imagen en su declaración de antecedentes. Esto es simplemente para confundir ie8 y evitar que use tanto el filtro como el fondo que ha establecido, y solo use el filtro. Otros navegadores admiten varias imágenes de fondo y comprenderán la declaración de fondo y no comprenderán el filtro, por lo tanto, solo utilizarán el fondo.

Es posible que también necesite jugar con el método sizing en el filtro para que funcione como lo desee.

Answer 10

Por favor intente el código de abajo.

background: transparent\0/; 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png'); /* IE7 */  
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png')"; /* IE8 */