web-dev-qa-db-fra.com

Comment utiliser des fichiers PNG transparents dans IE6?

Comment utiliser des fichiers PNG transparents dans IE6? J'ai une application d'entreprise qui doit utilise IE6 et doit utilise des fichiers PNG, mais la transparence apparaît sous la forme d'une couleur blanc pâle.

internet-explorer-6pngtransparency
6
Mark Henderson

Il y a un jQuery plugin for it here , ou le script suivant fait également du bon travail (appelez-le simplement dans votre <body onload="">;

function fixPNG(){

    var arVersion = navigator.appVersion.split("MSIE")
        var version = parseFloat(arVersion[1])

        if ((version >= 5.5) && (version < 7) && (document.body.filters)) 


        {
           for(var i=0; i<document.images.length; i++)
           {
              var img = document.images[i]
              var imgName = img.src.toUpperCase()
              if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
              {
                 var imgID = (img.id) ? "id='" + img.id + "' " : ""
                 var imgClass = (img.className) ? "class='" + img.className + "' " : ""
                 var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
                 var imgStyle = "display:inline-block;" + img.style.cssText 
                 if (img.align == "left") imgStyle = "float:left;" + imgStyle
                 if (img.align == "right") imgStyle = "float:right;" + imgStyle
                 if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
                 var strNewHTML = "<span " + imgID + imgClass + imgTitle
                 + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
                 + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
                 + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
                 img.outerHTML = strNewHTML
                 i = i-1
              }
           }
        }

}
7
Mark Henderson

IE6 prend en charge les fichiers PNG prêts à l'emploi transparents (mais non translucides). Le fichier PNG doit simplement être enregistré au format PNG8. Si tout ce dont vous avez besoin est un arrière-plan transparent et non un effet de fusion, vous n'avez besoin d'aucun code. Il suffit de sauvegarder en PNG8.

6
Gareth Farrington

24 manières a un article bien écrit sur cette question:

http://24ways.org/2007/supersleight-transparent-png-in-ie6

1
Sean Moubry

Si vous êtes d'accord avec la transparence de type GIF (dans IE6 uniquement), utilisez ensuite PNG8 + Alpha (avec palette, mais avec des semi-transparences).

Il donne l'alpha complet dans tous les autres navigateurs. Ne nécessite pas de filtres DX lents et difficiles (sur lesquels tous les correctifs IE6 PNG24).

Fireworks et pngnq/pngquant peuvent enregistrer ce format (j'ai écrit interface graphique Mac pour eux).

Adobe Photoshop est le seul logiciel notable qui ne le supporte pas, mais vous pouvez exporter PNG24 puis le convertir.

1
Kornel