Hoe verwijder ik de grijze achtergrond van een transparante PNG afbeelding

Inleiding

Hoe verwijder je de grijze achtergrond van een transparante PNG? Heb je eindelijk de manier gevonden om je website sjieker te maken, wordt het plaatje niet goed weergegeven in Internet Explorer. Ellende, maar hoe lost je het op?

Niet alle trucs op internet schijnen namelijk te werken. Het voorbeeld dat hieronder gegeven wordt op LeerWiki heeft tot nu toe in 100% van alle gevallen gewerkt. Hopelijk ook voor u!

Stappen

  <script type="text/javascript"><?php /* Needed to avoid Flash of Unstyle Content in IE */&#160;?> </script>
<script defer type="text/javascript">
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (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)&#160;? "id='" + img.id + "' "&#160;: ""
         var imgClass = (img.className)&#160;? "class='" + img.className + "' "&#160;: ""
         var imgTitle = (img.title)&#160;? "title='" + img.title + "' "&#160;: "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></span>" 
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}
</script>

Tips

Wanneer je toevalling een achtergrond in de CSS met een PNG? Gebruik dan de volgende code:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 
(src="your_file_name.png",sizingMethod="scale");

voor sizingmethod kan je gebruiken:

• image
• scale
• crop

Handige links