PNG8 Borde negro en IE

Question

Tengo un problema en IE con imágenes PNG8 porque aparece con un gran borde negro sucio en el sombreado de mi * .png. (IE7, IE8)

Estoy usando alphatransparency y básicamente tengo sombreado debajo de mi imagen pequeña. Todos los navegadores lo procesan bien, excepto IE, que representa el sombreado como un círculo negro.

Necesito la imagen "transparente" porque aparece encima de una variedad de fondos multicolores, etc.?

¿Alguna idea?

Answer 1

He sufrido de problemas similares con la opacidad en IE7, IE8 lo que puede hacer es darle a su imagen PNG un background color que eliminará las fronteras feos de la imagen .... A mí me funciona

Answer 2

OK - resuelve el problema. Parecía que mi JS estaba asignando

filter: alpha(opacity=100); 

a la imagen y esto es lo que estaba causando que aparezca la marca de negro como ya había hecho la alphatransparent imagen en la codificación PNG8.

Answer 3

Me gustaría dar las gracias por la respuesta y por agregar algo. En mi caso específico, que necesitaba para anular un estilo que era:

filter: alpha(opacity=50); 

Agregar el código de abajo hizo que mi opacidad correcta, pero agregó que el tema de los bordes negros:

filter: alpha(opacity=100); 

Ésta es la línea que me salvó al solucionar el problema:

filter: 0; 

¡Espero que esto ayude a alguien más también!

Answer 4

Estoy obligado a responder. Acabo de resolver este problema también. Solo para recapitular, en IE7 e IE 8, las imágenes transparentes PNG y GIF en los enlaces a veces tienen un borde negro o una sombra a su alrededor.

Debe asegurarse de que no haya filtros de opacidad en estas imágenes. Tengo la opacidad en 100. He cambiado esto a

filter:0; 

Recuerde también para enlaces de texto borroso, es necesario especificar un color de fondo para el enlace o de lo contrario será difusa y borrosa.

Muerte a IE !!

Answer 5

Esto funcionó para mí con opacidades animados:

img{ 
    background: transparent; 
    -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)”; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); 
    zoom: 1; 
} 

Answer 6

Después de buscar soluciones alternativas, regresé a las imágenes de origen en busca de respuestas.

Parece que los archivos .png de 24 bits causan problemas, pero las versiones de 8 bits se comportan bien. No he investigado esto en profundidad.

Estos ajustes en Photoshop Guardar para Web & dispositivos -dialog me ayudó a deshacerme de los trazos negros en las animaciones de opacidad:

PNG-8, selectivo, Difusión, Transparencia, Colores: 256, Mate: Ninguno, Sin Dither de transparencia, entrelazado y Convierta a sRGB con "Internet Standard RGB".

Answer 7

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 8

Puede hacerlo en CSS comprar usando el sistema de filtración exclusivo de IE.

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 fondo. 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.