zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Knowledge Base
Seite neu laden alpha-transparente PNG im Internet Explorer

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.02.2006, 22:16
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard alpha-transparente PNG im Internet Explorer

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>
Angehängte Grafiken
Dateityp: png alphatransparency.png (3,8 KB, 5268x aufgerufen)
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.02.2006, 23:23
Benutzerbild von laborix
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.12.2005
Beiträge: 1.494
laborix ist ein sehr geschätzer Menschlaborix ist ein sehr geschätzer Menschlaborix ist ein sehr geschätzer Mensch
Standard Re: alpha-transparente PNG im Internet Explorer

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

Geändert von laborix (28.07.2010 um 09:39 Uhr) Grund: Korrekturen am Text und Link auf Test Case
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.02.2006, 09:30
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

@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>
Mit Zitat antworten
  #4 (permalink)  
Alt 22.02.2006, 16:53
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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]-->
__________________
</ulle>
Mit Zitat antworten
  #5 (permalink)  
Alt 29.03.2006, 01:30
Benutzerbild von daro
CSS-GrandmasterJediKnight
XHTMLforum-Mitglied
 
Registriert seit: 31.01.2006
Ort: Coruscant
Beiträge: 101
daro befindet sich auf einem aufstrebenden Ast
Standard

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);
Mit Zitat antworten
  #6 (permalink)  
Alt 29.03.2006, 20:37
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

@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)
__________________
</ulle>
Mit Zitat antworten
  #7 (permalink)  
Alt 30.03.2006, 00:55
Benutzerbild von daro
CSS-GrandmasterJediKnight
XHTMLforum-Mitglied
 
Registriert seit: 31.01.2006
Ort: Coruscant
Beiträge: 101
daro befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #8 (permalink)  
Alt 21.04.2006, 12:27
BZ BZ ist offline
Neuer Benutzer
neuer user
 
Registriert seit: 08.10.2005
Beiträge: 8
BZ befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #9 (permalink)  
Alt 21.04.2006, 22:51
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 07.05.2006, 14:07
Neuer Benutzer
neuer user
 
Registriert seit: 07.05.2006
Beiträge: 5
hups befindet sich auf einem aufstrebenden Ast
Standard png bilder

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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:03 Uhr.