Des bords noirs apparaissent lorsque jQuery modifie la transparence des images png sous IE8_jquery

Lorsque vous utilisez jQuery pour ajouter une animation afficher-masquer à une image au format png24, vous constatez que des bords noirs apparaissent dans la zone translucide de l'image ?

Après une recherche en ligne, il existe principalement les méthodes suivantes :

1. Enregistrez l'image au format PNG-8.

2. Coupez la couleur d'arrière-plan et enregistrez-la au format JPG.

J'ai essayé les deux méthodes ci-dessus, mais il semble que l'effet ne soit pas bon. Le format png8 aura toujours des bords noirs.

Solution :

1. Ne changez pas directement la transparence de l'image, mais mettez un conteneur pour l'image pour modifier la transparence du conteneur
2. Ajoutez une couleur de fond d'une couleur similaire à ce conteneur (très important, la clé pour résoudre le bug est cette étape)
Dans des circonstances normales, le bug est résolu à ce stade. Si vous rencontrez toujours des problèmes, veuillez consulter ci-dessous :

3. Ajouter un zoom au conteneur : 1
(Personnellement, je pense que cette méthode n'est qu'une dissimulation et ne résout pas fondamentalement le problème. Il semble que ce soit la seule solution pour l'instant. J'attends avec impatience une meilleure méthode)

À l'heure actuelle, Internet a des exigences de plus en plus élevées en matière d'effets de page Web, et il est inévitable d'utiliser des images PNG. PNG est divisé en plusieurs formats, PNG8, PNG24, PNG32, parmi lesquels le plus couramment utilisé, qui également. a un effet d'affichage et une taille modérés, est PNG24. Il prend en charge la translucidité, la transparence et les couleurs très riches. Cependant, parce que la plupart de nos Chinois utilisent la série IE ou des navigateurs avec IE comme série principale, et parce que WINDOWS XP a une taille relativement grande. part de marché sur le marché intérieur, et de nombreuses personnes utilisent encore XP IE6 IE7 IE8 et d'autres navigateurs, et ces navigateurs ont plus ou moins de lacunes dans leur prise en charge de PNG. IE6 ne prend pas du tout en charge le PNG, et IE7, IE8 ne prend pas complètement en charge le PNG. . Lors de la modification de la transparence d'une image sous IE7 IE8, le format PNG ne sera pas pris en charge. Il y aura une bordure noire dans la zone transparente, toute la zone translucide sera noire. Après quelques recherches, j'ai découvert qu'en utilisant PNG comme arrière-plan, utilisez Microsoft Le filtre unique pour charger les images peut résoudre le problème de la non-prise en charge par IE6 du PNG, et peut également résoudre le problème des bords noirs lors de l'utilisation de l'effet de transparence d'animation JQUERY sous. IE7 et IE8 Il existe des codes et des images réelles, comme suit

.

Code Javascript

<script>
function correctPNG() {
  var arVersion = navigator.appVersion.split("MSIE")
  var version = parseFloat(arVersion[1])
  if ((version >= 5.5) && (document.body.filters)) {
    var lee_i = 0;
    var docimgs=document.images;
    for (var j = 0; j < docimgs.length; j++) {
      var img = docimgs[j]
      var imgName = img.src.toUpperCase();
      if (imgName.substring(imgName.length - 3, imgName.length) == "PNG" && !img.getAttribute("usemap")) {
        lee_i++;
        var SpanID = img.id || 'ra_png_' + lee_i.toString();
        var imgData = new Image();
        imgData.proData = SpanID;
        imgData.onload = function () {
          $("#" + this.proData).css("width", this.width + "px").css("height", this.height + "px");
        }
        imgData.src = img.src;
        var imgID = "id='" + SpanID + "' ";
        var imgClass = (img.className) &#63; "class='" + img.className + "' " : ""
        var imgTitle = (img.title) &#63; "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;
        j = j - 1;
      }
    }
  }
}
//判断是否为IE8及以下浏览器，其实除了这三个浏览器不支持addEventListener，其它浏览器都没问题
if (typeof window.addEventListener == "undefined" && typeof document.getElementsByClassName == "undefined") {
  window.attachEvent("onload", correctPNG);
}
</script>

Référez-vous à la bibliothèque de classes jquery1.8 avant la balise de fin de /body de la page, puis ajoutez le code ci-dessus. Il n'y a aucun problème pour afficher PNG24 dans IE6 7 8. Si vous avez besoin d'animer une animation ou d'obtenir des images, vous constaterez que dans IE 6 7 8 fois, l'image PNG est introuvable ou il n'y a pas de réponse après avoir modifié sa position et sa transparence. La raison en est que correctPNG remplace les balises IMG de tous les PNG de la page par des balises SPAN, et utilise ensuite filter: progid sur les balises SPAN. :DXImageTransform.Microsoft.AlphaImageLoader charge l'image PNG, l'approche recommandée consiste donc à inclure l'image dans un DIV. Une seule balise IMG est autorisée dans ce DIV, puis à effectuer la position ou la transparence. opérations associées sur la DIV, par exemple :

<div id='test'><img src='xxxx.png'/></div>
<script>
$("#test").animate({opacity:0.2,marginLeft:500},1000,function(){alert('run complete');});
</script>

Une autre situation est qu'en plus de la transparence et du déplacement de cette image, je dois également modifier sa largeur et sa hauteur. Dans ce cas, je recommande la méthode suivante
.

<div id='test'><img src='xxxx.png'/></div>
<script>
$($("#test span")[0]||$("#test img")[0]).animate({opacity:0.2,marginLeft:500,width:'500px',height:'500px'},1000,function(){alert('run complete');});
</script>

Bienvenue pour discuter si vous avez des questions