alpha-transparente PNG im Internet Explorer

ulle · #1 (**permalink**) 21.02.2006, 22:16

Hallo,

ich habe da heute folgendes im BLOG von Martin Labuschin gefunden:

Transparenz und Anzeige von PNG im Internet Explorer

Das es geht war mir bekannt, aber das es so einfach ist nicht.
Ich habe eine TEST-Case zusamengestellt und ein PNG angehängt.
Viel Spaß damit und Danke an Martin Labuschin!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>

<style type="text/css">
/*<![CDATA[*/


p			{
			float: left;
			
			width: 200px;
			height:200px;
			
			margin: 1em;
			
			background-color: #FF9900;
			background-repeat: no-repeat;
			background-position: top right;
			}
			
* html p
			{
			/*
			 * http://msdn.microsoft.com/workshop/author/filter/reference/filters/alphaimageloader.asp
			 */
			filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alphatransparency.png', sizingMethod='scale');	
			}
			
			
html > body p
			{
			background-image: url(alphatransparency.png);
			}
			
#blua		{
			background-color: #2299FF;
			}
#red		{
			background-color: #FF2200;
			}
#yellow		{
			background-color: #FFEE00;
			}
/*]]>*/
</style> 


</head><body>



alphatransparency</p>
<p id="blua">alphatransparency</p>
<p id="red">alphatransparency</p>
<p id="yellow">alphatransparency</p>


</body></html>

laborix · #2 (**permalink**) 21.02.2006, 23:23

Zitat:

Zitat von ulle

Hallo,

ich habe da heute folgendes im BLOG von Martin Labuschin gefunden:

Transparenz und Anzeige von PNG im Internet Explorer

Für alle die den eingesetzten Browser auf PNG Alphakanal Transparenz testen wollen füge ich hier ein zusätzlichen "Test-Case" ein:

www.aadmm.de/de/test/gf.htm
Hier kann PNG Alphakanal Transparenz mit Farbverlauf und Texten getestet werden.

Zur Info:

- MS Internet Explorer 6 SP2 kann ... Siehe //Edit und Korrektur vom 16.08.2006
- MS Internet Explorer 7.0 beta 1 und beta 2 unterstützen PNG Alphakanal Transparenz vollständig, inkl. PNG Transparenz

//Edit und Korrektur: 16.08.2006

Korrektur:
MS Internet Explorer bis einschliesslich 6 SP2 kann nicht mit PNG Transparenz umgehen, die mehr als 256 Farben haben. Ist die PNG-Grafik mit 256 Farben gespeichert, so kann der Internet Explorer 6 diese 256 Farben PNG Grafik mit Transparenz ohne Hilfsmittel darstellen.
Edit:
MS Internet Explorer 7.0 beta 1, 2 und 3 unterstützen PNG Alphakanal Transparenz vollständig, inkl. PNG Transparenz
Edit: die zweite...
MS Internet Explorer 8.0 beta 1 und 2 unterstützt PNG Alphakanal Transparenz vollständig, inkl. PNG Transparenz

ulle · #3 (**permalink**) 22.02.2006, 09:30

@laborix

Danke für Deine Infos zum IE7 und das zusätzlich TEST-Case. Demnach wird es wohl wichtig den Filter vor dem IE7 zu verstecken und da er ja erst ab dem IE5.5 funktioniert nun noch folgender CODE, der dieses Problem mit Hilfe von Conditional Comments berücksichtigt. Somit ist auch der CSS-Validator zufrieden!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>xxxx</title> 

<style type="text/css"> 
/*<![CDATA[*/ 


p			{ 
			width: 200px; 
			height:200px; 
			
			margin: 1em; 
			
			background-color: #FF9900; 
			background-image: url(alphatransparency.png);
			background-repeat: no-repeat; 
			background-position: top right; 
			} 
          
/*]]>*/ 
</style> 

<!--[if lt IE 7]> 
   <!--[if gte IE 5.500]> 
		    
		<style type="text/css"> 
		         
		p			{ 
				background-image: none;
				filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alphatransparency.png', sizingMethod='scale');    
				} 
		         
		</style> 
    
   <![endif]--> 
<![endif]-->


</head><body> 



alphatransparency</p> 

</body></html>

ulle · #4 (**permalink**) 22.02.2006, 16:53

Nachsatz:

Die oben gezeigte CC Kaskade kommt nicht durch den W3C-Validator (XML)!

Ein CSS @import mit einfachen Hochkomma ohne Blank schliesst IE5/IE5Mac aus!

siehe auch:
http://www.dithered.com/css_filters/css_only/
http://www.dithered.com/css_filters/..._no_space.html

Durch die Anwendung der entsprechenden CSS @import-Rule kann die CC-Kaskade entfallen, bzw. auf den IE 7 reduziert werden. siehe CODE Bespiel.

Code:

<!--[if lt IE 7]>

	<style type="text/css">
	@import'filter.css';
	</style> 
	
<![endif]-->

daro · #5 (**permalink**) 29.03.2006, 01:30

hier ein javascript snippet, das im ie alle png bilder richtig anzeigen lässt
weiß leider nich mehr wo ichs gefunden hatte

Code:

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
   {
   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
	     }
      }
   }
window.attachEvent("onload", correctPNG);

ulle · #6 (**permalink**) 29.03.2006, 20:37

@daro

Ich hoffe es ist in Deinem Sinne dass ich die Informationen zu Deinem Snippet erweitere!

Diese Funktion wendet den MS-Filter auf alle img-Tags die PNG enthalten an, also auf Markup und nicht auf CSS-Definitionen (background-image)!

Im Markup funktioniert es auch wunderbar. Nur sind transparente Bilder meist Sytle-Elemente in einem WEB-Document und somit niemals in einem img-Tag. Eine Informationsgrafik oder ein Foto sind ja selten transparent.

Warum Gestaltungs-Elemente nichts im img-Tag zu suchen haben, dieses Thema sollte in diesem THREAD nicht diskutiert werden. (Suchfunktion)

daro · #7 (**permalink**) 30.03.2006, 00:55

Zitat:

Warum Gestaltungs-Elemente nichts im img-Tag zu suchen haben, dieses Thema sollte in diesem THREAD nicht diskutiert werden. (Suchfunktion)

für gstaltungs elemente wäre das ja auch unsinn, da diese ja immer gleich sind
und dass bilder/photos keine transparenz brauchen würde ich ncith sagen

zb könnte man vorschaubilder mit aufwendigen schatten versehen (auch wenn zahlreiche css technijen dafür gibt, allerdings ist bei denen zusätzliches markup erforderlich)

BZ · #8 (**permalink**) 21.04.2006, 12:27

Hallo Forum,

ich möchte ebenfalls ein transparentes PNG als Hintergrund anzeigen lassen.
Nun habe ich dank zahlreicher Suchen hier und bei Google mittlerweile eine Lösung zusammengepfriemelt, mit der ich schon fast glücklich bin. Eine Kleinigkeit fehlt mir jedoch noch zu meinem vollkommenen Glück:

Da das PNG über die ganze Fensterbreite geht (lies: die Grafik ist 2500 Pixel breit, um möglichst alle Screengrößen abzudecken) und ein Element enthält, das immer in der Mitte sein sollte, müßte das Hintergrundbild noch irgendwie zentriert sein.

Code:

#topnavi {
	position:absolute;
	top:0;
	left:0;
	height:300px;
	width:100%;
	background-position: left bottom;
	}
	
* html #topnavi {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/hg_navitab.png', sizingMethod='crop');
	}

html > body #topnavi {
	background:transparent url(images/hg_navitab.png) center bottom no-repeat;
	}

Mit der Lösung von oben (bzw. der Angabe von background-position) klappt das aber im IE noch nicht (der FF greift natürlich auf das korrekte CSS zurück und zeigt das HG-Bild korrekt an...)

Gibt es irgendeine Möglichkeit, den AlphaImageLoader im Container zu zentrieren?

ulle · #9 (**permalink**) 21.04.2006, 22:51

Zitat:

Zitat von BZ

......
Gibt es irgendeine Möglichkeit, den AlphaImageLoader im Container zu zentrieren?

Nein, das durch den IE:Filter definierte Bild ersteckt/skaliert sich immer über die gesamte Größe des definierten Container. CSS-Hintergrund-Eigenschaften sind nicht auf den IE:Filter anwendbar, zumindest mir nicht bekannt und auch negativ getestet.

Tipp: Mit CSS-Layer arbeiten

hups · #10 (**permalink**) 07.05.2006, 14:07

hallo ich habe eine e107 homepage und der ie zeigt manche png bilder bzw tranparente nicht an wie und wo muss ich den hier beschrieebenen code eingeben hab ne style.css und ne theme.php

ich hab ie6.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Probleme im Internet Explorer	web334	CSS	15	21.06.2013 20:27
Internet Explorer 7, Vista, Transparente PNGs, Opacity = Chaos	sebbibasti	CSS	7	30.04.2009 21:57
png und der internet explorer	alejandro	CSS	24	02.10.2008 21:16
Transparente Schrift im Internet Explorer 6?	davekch	CSS	13	09.10.2007 11:56
PNG Transparenz, CSS und Internet Explorer	fanttomas	CSS	1	14.02.2006 11:43