javascript La trasparenza PNG è visibile in IE8



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

javascript internet-explorer internet-explorer-8 png iepngfix

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!




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



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; }





Related