|
|||
![]()
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>
__________________
</ulle> |
Sponsored Links |
|
||||
![]() Zitat:
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 |
Sponsored Links |
|
|||
![]()
@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> |
|
|||
![]()
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> |
|
|||
![]()
@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> |
|
||||
![]() Zitat:
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) |
|
|||
![]()
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; } Gibt es irgendeine Möglichkeit, den AlphaImageLoader im Container zu zentrieren? |
|
|||
![]() Zitat:
Tipp: Mit CSS-Layer arbeiten
__________________
</ulle> |
Sponsored Links |
|
|||
![]()
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. |
Sponsored Links |
![]() |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
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 |