[javascript] La trasparenza PNG è visibile in IE8


Answers

Lo metto in un plugin jQuery per renderlo più modulare (fornisci la gif trasparente):

$.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: funziona anche se le immagini sono immagini di sfondo. Basta applicare la funzione sul div.

Question

Sto riscontrando problemi con un'immagine PNG trasparente che mostra artefatti di pixel retinati neri attorno al bordo della parte non trasparente dell'immagine. Lo fa solo in Internet Explorer e lo fa solo da un file Javascript in cui è usato.

Ecco di cosa sto parlando ... http://70.86.157.71/test/test3.htm (link now dead) ... nota la ragazza nell'angolo in basso a destra. Ha artefatti intorno a lei in IE8 (non l'ho provato nelle precedenti versioni di IE, ma presumo che probabilmente faccia lo stesso). Funziona perfettamente in Firefox e Chrome. L'immagine viene caricata da un file Javascript per produrre l'effetto mouseover.

Se si carica l'immagine da sola, funziona correttamente. Ecco l'immagine ... http://70.86.157.71/test/consultant2.png

Qualcuno sa come risolvere questo problema?

L'immagine è stata prodotta in Photoshop CS3.

Ho letto cose su come rimuovere Gama, ma apparentemente era nelle versioni precedenti di Photoshop e quando lo carico in TweakPNG, non ha Gama.

Per favore aiuto!




Io uso una correzione CSS piuttosto che JS per risolvere il problema con il mio arrotondato livello con cornici trasparenti all'interno

Provare

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

Questo potrebbe richiedere più lavoro su ie9 o successive.




Il mio scenario:

  • Avevo un'immagine di sfondo con un png alpha a 24 bit impostato su un collegamento di ancoraggio.
  • L'ancora era sbiadita in hover usando Jquery.

per esempio.

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

Ho scoperto che applicare la maggiorazione fornita da Dan Tello non ha funzionato.

Tuttavia, posizionando una span all'interno dell'elemento anchor e impostando l'immagine di sfondo su quell'elemento, sono riuscito a ottenere un buon risultato usando il markup di Dan Tello.

per esempio.

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



Ho fatto accadere la stessa cosa a un PNG con trasparenza impostato come immagine di sfondo di un elemento <A> con opacità applicata.

La correzione era di impostare il colore di sfondo dell'elemento <A>.

Quindi, il seguente:

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

Diventa:

/* "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: ...;



per favore prova sotto il codice.

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





Links