javascript - La trasparenza PNG è visibile in IE8




5 Answers

FISSO!

Ho lottato con lo stesso problema, e ho appena fatto una svolta! Abbiamo stabilito che se si assegna all'immagine un colore di sfondo o un'immagine, il png viene visualizzato correttamente sopra di esso. Il bordo nero è sparito, ma ora hai uno sfondo opaco, e questo praticamente sconfigge lo scopo.

Poi mi sono ricordato di un convertitore di filtri rgba to ie che mi sono imbattuto. (Grazie a Michael Bester). Quindi mi chiedevo cosa sarebbe successo se avessi dato al mio problema pngs uno sfondo ad esempio filtrato emulando rgba (255,255,255,0), aspettandomi che non funzionasse, ma proviamoci comunque ...

.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! Addio nero, e ciao, alfa canali di lavoro in ie7 e 8. Dissolvi i tuoi png dentro e fuori, o li anima sullo schermo - va tutto bene.

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!




So che questo thread è morto da tempo, ma ecco un'altra risposta al vecchio problema di background p8 ieng.

Puoi farlo in CSS usando il sistema di filtraggio proprietario di IE come questo:

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

DEMO

dovrai usare un blank.gif per la "prima" immagine nella dichiarazione dello sfondo. Questo è semplicemente per confondere ie8 e impedirgli di usare sia il filtro che lo sfondo che hai impostato, e usare solo il filtro. Altri browser supportano più immagini di sfondo e capiranno la dichiarazione di background e non capiranno il filtro, quindi useranno solo lo sfondo.

Potrebbe anche essere necessario giocare con sizingMethod nel filtro per farlo funzionare nel modo desiderato.




La trasparenza PNG è visibile in IE8

La soluzione di Dan ha funzionato per me. Stavo cercando di sfumare un div con un'immagine di sfondo. Avvertenze: non puoi sbiadire direttamente il div, ma sbiadire un'immagine wrapper. Inoltre, aggiungi i seguenti filtri per applicare un'immagine di sfondo:

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

Si noti che i percorsi negli attributi src dei filtri sono assoluti e non relativi al foglio css.

Ho anche aggiunto:

background: transparent\9;

Ciò fa sì che IE ignori la mia precedente dichiarazione sull'effettiva immagine di sfondo per gli altri browser.

Grazie Dan !!!




La soluzione di Dan Tello ha funzionato bene per me.

Un altro problema che ho riscontrato con IE8 era che se il PNG veniva tenuto in un DIV con dimensioni CSS o altezza CSS inferiori rispetto al PNG, il problema del bordo nero veniva reinnescato.

Correggere la larghezza e l'altezza CSS o rimuoverli del tutto fissi.




Voglio solo aggiungere (dato che ho cercato su Google questo problema e questa domanda è saltata prima) IE6 e altre versioni rendono la trasparenza PNG molto brutta. Se si dispone di un'immagine PNG trasparente alfa (32 bit) e si desidera mostrarla su uno sfondo complesso, non è mai possibile farlo semplicemente in IE. Ma puoi visualizzarlo correttamente su uno sfondo a singolo colore purché imposti che le immagini PNG (o div) attributo CSS background-color siano uguali a quelle del background-color genitori.

Questo renderà il nero dove l'immagine dovrebbe essere alfa trasparente e trasparente dove il byte alfa è 0:

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

E questo renderà correttamente (notare l'attributo background-color nel div interno) :

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

Un'alternativa complessa a questa che abilita l'immagine alfa su uno sfondo complesso consiste nell'utilizzare AlphaImageLoader per caricare e rendere l'immagine della certa opacità. Funziona fino a quando non vuoi cambiare questa opacità ... Il problema in dettaglio e la sua soluzione (javascript) possono essere trovati HERE .




Related