Stefan-Ganz.de > Home > Story

Transparente PNGs und Opacity (IE7/IE8)

26.04.2011 von Stefan Ganz (0 Kommentare)

Es ist zum Mäuse melken - was andere Browser schon seit Jahren beherrschen, muss beim IE7 und IE8 mühsam dazugetrickst werden.

Diesmal geht es um die Kombination von transparenten PNGs auf transparenten Hintergründen.

Liegt ein solches PNG auf einem Hintergrund, der mittels der IE-CSS-Eigenschaft "filter" ebenfalls transparent gesetzt wurde, dann verliert das PNG seine Transparenz.

Bekannt wurde das Problem schon im IE7, gefixed wurde es von Microsoft erst im IE9.

Die korrekte Darstellung kann in den beiden älteren IE-Kandidaten folgendermaßen erzwungen werden:

<!--[if lte IE 8]>
<script type="text/javascript">
  window.addEvent('domready', function(){
    var i;
    for (i in document.images) {    
      if (document.images[i].src) {
        var imgSrc = document.images[i].src;
        if (imgSrc.substr(imgSrc.length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG') {
            document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
        }
    }}
  }); 
</script>
<![endif]-->


Vielen Dank für den Ansatz an http://stackoverflow.com/questions/1004973/how-to-maintain-png-alpha-transparency-when-using-ms-filter-property.

Zurück

Einen Kommentar schreiben