javascript - PNG Transparency Prolblem en IE8

internet-explorer internet-explorer-8

Question

Estoy teniendo problemas con una imagen PNG transparente que muestra artefactos negros difuminados en píxeles alrededor del borde de la parte no transparente de la imagen. Solo lo hace en Internet Explorer y solo lo hace desde un archivo Javascript en el que se usa.

Esto es de lo que estoy hablando ... http://70.86.157.71/test/test3.htm (enlace ahora muerto) ... observe a la chica en 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 arreglar esto?

La imagen fue producida en Photoshop CS3.

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

¡Por favor ayuda!

Answer 1

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

Un problema adicional que encontré con IE8 fue que si el PNG se mantenía en un DIV con dimensiones de ancho o alto de CSS más pequeñas que el PNG, el problema de borde negro se volvía a activar.

Corregir el ancho y alto CSS o eliminarlos completamente fijos.

Answer 2

Mi escenario:

• Tenía una imagen de fondo que tenía un png alfa de 24 bits que se estableció en un enlace de anclaje.
• El ancla se estaba desvaneciendo al pasar el mouse sobre Jquery.

p.ej.

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

Descubrí que aplicar el margen 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.

p.ej.

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

Answer 3

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

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

Entonces, lo 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 4

Puse esto en un plugin jQuery para hacerlo más modular (usted 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 sus imágenes son imágenes de fondo. Solo aplica la función en el div.

Answer 5

Sé que este hilo ha estado muerto en algún momento, pero aquí hay otra respuesta al antiguo problema de fondo png ie8.

Puedes hacerlo en CSS usando el sistema de filtrado propietario de IE así:

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

DEMO

necesitarás usar un blank.gif para la ''primera'' imagen en tu 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.

También es posible que necesite jugar con sizingMethod en el filtro para que funcione del modo que desee.

Answer 6

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 solo fondo de color siempre que establezca que las imágenes PNG (o divs) background-color atributo CSS sean las mismas que las del background-color los padres.

Por lo tanto, esto convertirá en negro donde la imagen debe ser transparente alfa, y transparente donde el byte alfa es 0:

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

Y esto se renderizará correctamente (observe el atributo de color de fondo en el div interno) :

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

Una alternativa compleja a esto que habilita la imagen alfa sobre un fondo complejo es usar AlphaImageLoader para cargar y renderizar la imagen de cierta opacidad. Esto funciona hasta que desee cambiar esa opacidad ... Puede encontrar el problema en detalle y su solución (javascript) HERE .

Answer 7

Utilizo un arreglo de CSS en lugar de JS para resolver mi capa redonda arrinconada con PNG transparente dentro

Tratar

.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

por favor intente debajo del código.

 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 */

Answer 9

PNG Transparency Prolblem en IE8

La solución de Dan funcionó 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 absolutas, y no relativas a la hoja de css.

También agregué:

background: transparent/9;

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

Gracias Dan !!!

Answer 10

¡FIJO!

He estado luchando con el mismo problema, ¡y solo tuve 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.

Entonces recordé un rgba, es decir, el convertidor de filtro que encontré. (Gracias a Michael Bester). Así que me preguntaba qué pasaría si le daba a mi problema pngs, es decir, un fondo filtrado emulando rgba (255,255,255,0), esperando que no funcionara, pero intentémoslo 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, trabaja canales alfa en ie7 y 8. Difumina tus pngs dentro o fuera, o anímalos a través de la pantalla, todo está bien.