Kommentare zu: Transparenzeffekte mit PNG-24 und CSS http://www.webkrauts.de/2007/12/24/transparenzeffekte-mit-png-24-und-css/ Für mehr Qualität im Web Mon, 06 Sep 2010 05:59:35 +0000 http://wordpress.org/?v=2.9.2 hourly 1 Von: Niko http://www.webkrauts.de/2007/12/24/transparenzeffekte-mit-png-24-und-css/comment-page-1/#comment-26097 Niko Thu, 09 Oct 2008 11:45:59 +0000 http://www.webkrauts.de/2007/12/23/transparenzeffekte-mit-png-24-und-css/#comment-26097 Sorry für den Doppelpost! Habs gefunden: <a href="http://homepage.ntlworld.com/bobosola/pnginfo.htm"> Danke :)</a> Sorry für den Doppelpost! Habs gefunden:

Danke :)

]]> Von: Niko http://www.webkrauts.de/2007/12/24/transparenzeffekte-mit-png-24-und-css/comment-page-1/#comment-26096 Niko Thu, 09 Oct 2008 11:09:58 +0000 http://www.webkrauts.de/2007/12/23/transparenzeffekte-mit-png-24-und-css/#comment-26096 Hallo, wie kann ich diesen AlphaImageLoader denn für ein einzelnes -tag einsetzten? Geht das? Viele Grüße Niko Hallo,

wie kann ich diesen AlphaImageLoader denn für ein einzelnes -tag einsetzten? Geht das?

Viele Grüße
Niko

]]> Von: Jan http://www.webkrauts.de/2007/12/24/transparenzeffekte-mit-png-24-und-css/comment-page-1/#comment-25678 Jan Fri, 20 Jun 2008 23:26:10 +0000 http://www.webkrauts.de/2007/12/23/transparenzeffekte-mit-png-24-und-css/#comment-25678 Hallo, vielen Dank für die gute Beschreibung. Das Verstecken eins Teils der Bilder macht ladezeitentechnisch wirklich Sinn. Hallo,

vielen Dank für die gute Beschreibung. Das Verstecken eins Teils der Bilder macht ladezeitentechnisch wirklich Sinn.

]]> Von: Daniel http://www.webkrauts.de/2007/12/24/transparenzeffekte-mit-png-24-und-css/comment-page-1/#comment-25001 Daniel Tue, 19 Feb 2008 21:59:00 +0000 http://www.webkrauts.de/2007/12/23/transparenzeffekte-mit-png-24-und-css/#comment-25001 Das ist ja schon ganz gut, aber wie kann ich denn das ganze lösen, wenn ich im CSS keinen Pfad angeben kann, da die Bilder dynamisch in den Container geladen werden sollen? Das ist ja schon ganz gut, aber wie kann ich denn das ganze lösen, wenn ich im CSS keinen Pfad angeben kann, da die Bilder dynamisch in den Container geladen werden sollen?

]]> Von: Vitali, Köln http://www.webkrauts.de/2007/12/24/transparenzeffekte-mit-png-24-und-css/comment-page-1/#comment-24983 Vitali, Köln Mon, 18 Feb 2008 19:03:45 +0000 http://www.webkrauts.de/2007/12/23/transparenzeffekte-mit-png-24-und-css/#comment-24983 Hallo! Yup, das funktioniert, ich hab das Bild als Vordergrundbild eingefügt, und das klappt! Vielen Dank an alle! PS. Hab webkrauts in die täglich besuchten Lesezeichen hinzugefügt :) Hallo! Yup, das funktioniert, ich hab das Bild als Vordergrundbild eingefügt, und das klappt! Vielen Dank an alle! PS. Hab webkrauts in die täglich besuchten Lesezeichen hinzugefügt :)

]]> Von: Eric Eggert http://www.webkrauts.de/2007/12/24/transparenzeffekte-mit-png-24-und-css/comment-page-1/#comment-24895 Eric Eggert Wed, 13 Feb 2008 23:44:25 +0000 http://www.webkrauts.de/2007/12/23/transparenzeffekte-mit-png-24-und-css/#comment-24895 Hallo Vitali, das JS funktioniert nur für Vordergrundbilder, nicht für CSS-Hintergrundbilder. Für Hintergrundbilder benutzt du am Besten in einer IE6.css folgende Anweisung: <code>element {    background-image:none;    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image src='pfad/zum/bild.png'); }</code> Der Pfad zum Bild ist dabei von der HTML-Datei aus zu sehen, nicht wie bei richtigem CSS von der CSS-Datei aus. (sizingMethod=crop ist manchmal auch sinnvoll.) Ich hoffe das hilft. Hallo Vitali,

das JS funktioniert nur für Vordergrundbilder, nicht für CSS-Hintergrundbilder. Für Hintergrundbilder benutzt du am Besten in einer IE6.css folgende Anweisung:

element {
   background-image:none;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image src='pfad/zum/bild.png');
}

Der Pfad zum Bild ist dabei von der HTML-Datei aus zu sehen, nicht wie bei richtigem CSS von der CSS-Datei aus. (sizingMethod=crop ist manchmal auch sinnvoll.) Ich hoffe das hilft.

]]> Von: Vitali, Köln http://www.webkrauts.de/2007/12/24/transparenzeffekte-mit-png-24-und-css/comment-page-1/#comment-24894 Vitali, Köln Wed, 13 Feb 2008 23:19:36 +0000 http://www.webkrauts.de/2007/12/23/transparenzeffekte-mit-png-24-und-css/#comment-24894 Hallo! Erstens vielen Dank für die schnelle Antwort. Bin ich wirklich der einzige bei dem es nicht klappt?:( Ich hab mich heute den ganzen Abend damit beschäftigt, ganz viel gelesen und dazu gelernt was eigentlich gut ist, aber das Problem (noch) nicht löst:) Ich hab also ein transparentes Bild erfolgreich erzeugt, eine html- und css-Datei, sowie auch die "geeignete Javascript-Lösung" heruntergeladen. Bei Firefox / Opera klappt das natürlich. Bei IE6 nicht!!! (Version 6.0.2900.2180 wenn das von Bedeutung sein könnte) Die Dateien sind hier: http://voing.dyndns.org/test1.html http://voing.dyndns.org/style.css http://voing.dyndns.org/pngfix.js http://voing.dyndns.org/bild.png Noch eine Datei, wie es bei mir in IE aussieht, vielleicht ist es bei euch nicht so... Wie gesagt, mit FF klappt das, sieht so cooool aus!:) http://voing.dyndns.org/ie.jpg Bitte um eure Hilfe!!! Was mache ich falsch? Danke! Hallo!
Erstens vielen Dank für die schnelle Antwort. Bin ich wirklich der einzige bei dem es nicht klappt?:( Ich hab mich heute den ganzen Abend damit beschäftigt, ganz viel gelesen und dazu gelernt was eigentlich gut ist, aber das Problem (noch) nicht löst:)

Ich hab also ein transparentes Bild erfolgreich erzeugt, eine html- und css-Datei, sowie auch die "geeignete Javascript-Lösung" heruntergeladen. Bei Firefox / Opera klappt das natürlich. Bei IE6 nicht!!! (Version 6.0.2900.2180 wenn das von Bedeutung sein könnte)

Die Dateien sind hier:
http://voing.dyndns.org/test1.html
http://voing.dyndns.org/style.css
http://voing.dyndns.org/pngfix.js
http://voing.dyndns.org/bild.png

Noch eine Datei, wie es bei mir in IE aussieht, vielleicht ist es bei euch nicht so… Wie gesagt, mit FF klappt das, sieht so cooool aus!:)

http://voing.dyndns.org/ie.jpg
Bitte um eure Hilfe!!! Was mache ich falsch? Danke!

]]> Von: Nils Pooker http://www.webkrauts.de/2007/12/24/transparenzeffekte-mit-png-24-und-css/comment-page-1/#comment-24868 Nils Pooker Tue, 12 Feb 2008 21:05:25 +0000 http://www.webkrauts.de/2007/12/23/transparenzeffekte-mit-png-24-und-css/#comment-24868 Hallo Vitali, Zu deiner ersten Frage – Punkt 1 hat ja keine Frage ;-) Das Problem sind die Alphakanäle der PNG-24-Dateien, die der IE 5-6 ohne zusätzliche Extrawurst nicht anzeigen kann. Die Javascript-Lösung ist sozusagen ein Hack – analog zu den CSS-Patches für diesen lieblichen Browser. Damit zu Punkt 2: Auch wenn Du keine Effekte haben willst, du bist in deinem Wunsch, PNG-24-Dateien mit allen Transparenzen browserübergreifend korrekt anzeigen zu lassen auf separate Lösungen angewiesen. Zu PNG-24-Dateien findest du es hier im Webkrauts-Kalender 2007 einen <a href="http://www.webkrauts.de/2007/12/16/transparente-grafiken-gif-und-png/">ausführlichen Beitrag von Nicolai Schwarz</a> mit weiteren Hinweisen. Hallo Vitali,
Zu deiner ersten Frage – Punkt 1 hat ja keine Frage ;-)
Das Problem sind die Alphakanäle der PNG-24-Dateien, die der IE 5-6 ohne zusätzliche Extrawurst nicht anzeigen kann. Die Javascript-Lösung ist sozusagen ein Hack – analog zu den CSS-Patches für diesen lieblichen Browser.

Damit zu Punkt 2: Auch wenn Du keine Effekte haben willst, du bist in deinem Wunsch, PNG-24-Dateien mit allen Transparenzen browserübergreifend korrekt anzeigen zu lassen auf separate Lösungen angewiesen.

Zu PNG-24-Dateien findest du es hier im Webkrauts-Kalender 2007 einen ausführlichen Beitrag von Nicolai Schwarz mit weiteren Hinweisen.

]]> Von: Vitali, Köln http://www.webkrauts.de/2007/12/24/transparenzeffekte-mit-png-24-und-css/comment-page-1/#comment-24867 Vitali, Köln Tue, 12 Feb 2008 19:24:49 +0000 http://www.webkrauts.de/2007/12/23/transparenzeffekte-mit-png-24-und-css/#comment-24867 Hallo! Ich spüre grade dass ich etwas sehr-sehr wichtiges gelesen habe, daher die Fragen, wenn auch blöde, sorry.. 1. Das Problem - das ist schon lange her als ich zum ersten Mal bemerkt habe dass transparente Bilder mit IE nicht funktionieren. Es entsteht so ein hellblauer Hintergrund. Das Problem konnte ich teilweise lösen indem ich keine transparenten Bilder, sondern Bilder mit derselben Hintergrundfarbe wie die Farbe der jeweiligen Website erstellt habe. (Was natürlich keinem gefallen kann und nicht immer die Situation rettet) 2. Das erste "grundsätzliche Beispiel" funktioniert auch bei IE6!!! Ich verstehe nun nicht ganz, bedeutet das dass wenn man ein kleines Javascript einsetzt, das Problem dann gelöst ist und transparente .png-Bilder immer richtig angezeigt werden? 3. Wenn ja, was hat das bitte mit CSS zu tun? Ich möchte keine Effekte, ich möchte nur das ein transparentes Bild transparent bleibt. Vielen Dank im Voraus für die Antworten :) Hallo! Ich spüre grade dass ich etwas sehr-sehr wichtiges gelesen habe, daher die Fragen, wenn auch blöde, sorry..
1. Das Problem – das ist schon lange her als ich zum ersten Mal bemerkt habe dass transparente Bilder mit IE nicht funktionieren. Es entsteht so ein hellblauer Hintergrund. Das Problem konnte ich teilweise lösen indem ich keine transparenten Bilder, sondern Bilder mit derselben Hintergrundfarbe wie die Farbe der jeweiligen Website erstellt habe. (Was natürlich keinem gefallen kann und nicht immer die Situation rettet)
2. Das erste "grundsätzliche Beispiel" funktioniert auch bei IE6!!! Ich verstehe nun nicht ganz, bedeutet das dass wenn man ein kleines Javascript einsetzt, das Problem dann gelöst ist und transparente .png-Bilder immer richtig angezeigt werden?

3. Wenn ja, was hat das bitte mit CSS zu tun? Ich möchte keine Effekte, ich möchte nur das ein transparentes Bild transparent bleibt.

Vielen Dank im Voraus für die Antworten :)

]]> Von: Michael http://www.webkrauts.de/2007/12/24/transparenzeffekte-mit-png-24-und-css/comment-page-1/#comment-24811 Michael Sun, 10 Feb 2008 19:39:55 +0000 http://www.webkrauts.de/2007/12/23/transparenzeffekte-mit-png-24-und-css/#comment-24811 na endlich, danke für den artikel...hat mir gerade eine Menge Zeit erspart. Merci na endlich, danke für den artikel…hat mir gerade eine Menge Zeit erspart. Merci

]]>