Hallo, ich habe ein kleines Problem mit (halb)transparenten PNG-Dateien in IE6-IE8. Ich habe mir folgende Lösung gebastelt:
JavaScript-Datei:
/res/fixpng.js
/**
* Fixes png images (transparent/fading) in IE6-8
* They are still a little to dark, but this is always the case when getting the image through "AlphaImageLoader".
* Without this, IE7-8 png may look terrible and IE6 has problems when using background images.
*/
// New placeholder image
tmpImage = new Image();
tmpImage.src = "/res/trans.gif";
// Get all images on page
images = document.images;
for (i=0; i<images.length; i++) {
image = images[i];
imageSrc = image.src;
// Only png images
if (imageSrc.split('.').pop().toLowerCase() == "png") {
// Remove original src, or the image displays even darker because it is loaded twice on top of each other
image.src = tmpImage.src;
// "AlphaImageLoader" makes the image a bit darker than in other browsers
image.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + imageSrc + "');";
}
}
Alles anzeigen
CSS-Datei:
/res/fixpng.css
@CHARSET "UTF-8";
.pngImage{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/res/trans.gif"); }
Einbinden im HTML-Header:
<!-- PNGfix -->
<!--[if IE 6 | IE 7 | IE 8]>
<script defer="defer" type="text/javascript" src="/res/fixpng.js" charset="UTF-8"></script>
<![if IE 7 | IE 8]>
<link rel="stylesheet" type="text/css" href="/res/fixpng.css">
<![endif]>
<![endif]-->
Verwendung auf der Seite:
<style type="text/css">
#headerLogo{
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 250px;
filter: alpha(opacity=70);
opacity: 0.7; }
</style>
[...]
<div id="headerLogo">
<img class="pngImage" alt="image" src="[URL='http://forum.netcup.de/view-source:http://dicterium.de/dicterium-05.png']image.png[/URL]" width="600px" height="250px">
</div>
Alles anzeigen
In der Lösung sehe ich einige Vorteile:
- Keine Inline-Style-Angaben im <img> oder <div> nötig.
- AlphaImageLoader liest Bildsource direct aus <img src>; der Pfad zum Bild wird nur an einer einzigen Stelle direkt am Bild selbst angegeben.
- <img> muß lediglich der class "pngImage" zugeordnet werden.
- Der reine CSS-Fix funktioniert auch dann, wenn Java-Script deaktiviert ist.
Allerdings Unterscheidet es sich damit immer noch ein wenig von der Darstellung im Firefox und ich würde gerne wissen, ob es hier noch andere Ansätze gibt.
- Es gibt ja auch den Style "-ms-filter", jedoch habe ich da keine Änderung gegenüber "-filter" gesehen.
- Ganz ohne Fix haben die PNGs in IE7-8 dicke schwarze Ränder
- Ohne JavaScript-Fix mit CSS-Fix sind alle PNGs in IE7-8 ein wenig dunkler als im Firefox.
- Ohne Fixes sehen die PNGs im IE6 richtig aus, aber es gibt Probleme mit Hintergrundbildern.
- Mit JavaScript- und CSS-Fix sehen voll sichtbare Bilder (opacity 100%) genauso aus wie im Firefox, bei reduzierter opacity (z.B. 70%) sind im IE6-8 die Bilder/Schatten ein wenig dunkler als im Firefox. Liegt dies am anderen Renderer (AlphaImageLoader) oder kann man da noch was drehen?
Im IE9 sieht übrigens alles genauso aus wie im Firefox
