Transparenter Hintergrund bei einem .png Bild

R

rico2009

Guest
Hi,

ich versuche gerade ein Bild (.png) mit einem transparenten Hintergrund auszustatten. In Gimp funktioniert das wunderbar, leider zeigt der Browser (Firefox) das Bild weiterhin mit einem weißen Hintergrund an. Hat jemand ne Idee, wie man dieses Verhalten unterbinden kann?


Gruß
 
Da ist es aber immer noch so:
rico2009 schrieb:
leider zeigt der Browser (Firefox) das Bild weiterhin mit einem weißen Hintergrund an. Hat jemand ne Idee, wie man dieses Verhalten unterbinden kann?
Zum Vergrößern anklicken....
59916-transparenter-hintergrund.png

Wobei ich aber glaube, dass das normal ist, weil dies bei vielen anderen PNG-Bildern ebenfalls auftritt...
 
Ups, ach du Schande. Ich hab nur im IE geguckt und war sicher, dass das passt. Hmmm, ist das jetzt ein Bug im Firefox? In Chrome und Opera muss man erstmal finden, wie man die Hintergrundfarbe ändert. Auf weiss sehe ich das ja nicht. Wenn ich es gefunden habe schaue ich mal damit.

- - - Aktualisiert - - -

Komisch. In meinem Firefox ist es tatsächlich auch nicht transparent, wenn ich es direkt öffne. Aber es ist transparent in einer HTML Seite: Logo Hintergrund

logo_screen.png

- - - Aktualisiert - - -

Opera: ebenfalls transparent
Chrome: auch
sogar der uralte Safari 5 für Win zeigt es transparent

Es ist scheinbar so, dass die Darstellung eines PNG auf direktem Wege anders ist, als wenn das PNG in einer HTML Seite gerendert wird. Aber Ersteres ist doch egal, wir verwenden das Logo doch sowieso nur im Forum, also immer in einem HTML Dokument.
 
Zuletzt bearbeitet:
mikdoe schrieb:
Es ist scheinbar so, dass die Darstellung eines PNG auf direktem Wege anders ist, als wenn das PNG in einer HTML Seite gerendert wird. Aber Ersteres ist doch egal, wir verwenden das Logo doch sowieso nur im Forum, also immer in einem HTML Dokument.
Zum Vergrößern anklicken....
Jep,
Julian schrieb:
Wobei [...] das normal ist, weil dies bei vielen anderen PNG-Bildern ebenfalls auftritt...
Zum Vergrößern anklicken....

Sollte auch deine Frage klären, Rico:
⇢PNG transparency is shown as white, how do I fix this? | Firefox-Hilfeforum | Mozilla-Hilfe
⇢754133 – Set background of standalone images (the image itself, not the whole page) to white
 
Wie funktioniert das denn mit Photoshop und kann statt PNG auch GIF verwendet werden? Möchte auf dieser Seite selber Geburtskarten erstellen, da unser Sohn kürzlich auf die Welt gekommen ist. Die sollen dann an Freunde, Familie, Bekannte usw. verschickt werden. Hab ein süßes Babyfoto und da soll der Hintergrund ebenfalls transparent sein. Hat da zufällig einer eine kurze Anleitung parat?
 
GIF und Transparenz? Ist zwar Möglich aber nicht schön. Dafür bietet sich PNG mehr an.

In Photoshop arbeitest du Standardmäßig mit Ebenen. Die unterste Ebene ist meist die Hintergrundfarbe. Blendest du die aus hast du "automatisch" ein transparenten Hintergrund. In der darüber liegenden Ebene ist das Bild, das du bearbeiten möchtest. Entweder löscht du alles mit dem Radiergummi, was du nicht mehr sehen willst, oder du nutzt das Polygon-Lasso Werkzeug. Das ist ganz grob mal angeschnitten.

Professionell würde man mit der Ebenenmaske arbeiten und alles in der Maske schwarz färben, was weg soll.

Zum Schluss exportierst du dein Bild mit "Für Web speichern ..." - optimierst evtl. noch paar Einstellungen und speicherst es ab.

Mehr nicht. :grin:
Und ja, ich habe gesehen, das der letzte Beitrag bissel her ist. Aber jeder soll eine Antwort bekommen. :)

Terra
 
Das Problem bei GIF Grafiken mit Transparenz liegt einfach darin, das es einen unschönen Rand um die Grafik gibt, wo die Transparenz beginnt. Dieses liegt einfach darin, das GIF kein Halbtransparent kennt. Das heißt, es sind Pixel sichtbar oder unsichtbar. Dazwischen gibt es nichts. Um aber keine Kanten um das Objekt zu sehen (Antialiasing), muss GIF eine Farbe unter die Stellen setzen, die weich gezeichnet werden. Das ist standardmäßig weiß (siehe Bild unten) - kann aber auch geändert werden. Zum anderen stellt das Standart-GIF maximal 256 Farben dar. Für einfache Grafiken vielleicht ausreichend aber nicht mehr Zeitgemäß.

PNG Grafiken mit Transparent haben kein besagten Rand. Die gleichzeitig darstellbaren Farben sind "unendlich" und ziemlich jeder Browser kommt heutzutage auch damit klar.

Und ganz klar - bei Zeiten von DSL sind paar KB mehr auch nicht das Problem.

Hab noch ein kleines Beispiel gebastelt, wo man die Unterschiede gut erkennt. Bei der GIF Grafik hab ich das beste rausgeholt, was ging.

t1.jpg


Gruß,
Terra
 
Zuletzt bearbeitet:
Aha, das ist mir bisher nie aufgefallen. Ich komme noch aus einer Zeit wo es noch kein PNG gab muss ich dazu sagen :)
Und das mag daran liegen, dass ich immer nur in Symbolen/Piktogrammen mit Transparenz gearbeitet habe, da fallen ausgefranste Ränder nicht so stark auf wie in deinem Beispiel. Danke für die Erklärung!
 
Wenn man ein einfarbigen Hintergrund hat und die Grafik selbst auch nur ein paar Farben hat, ist GIF natürlich immer noch machbar (wie z.B. hier im Forum die kleinen Grafiken neben den Buttons). Im großen und ganzen ist das GIF-Format aber veraltet. Wie du selbst sagst, kommt es halt aus der Zeit, wo Web-Animationen in den Kinderschuhen steckte und man lustige Flacker Bildchen mit Transparenz auf seine Webseite bringen wollte.

Tendiere mittlerweile selbst dazu, so ziemlich alle Grafiken, die ich erstelle in das PNG Format abzuspeichern. Find ich halt am dynamischsten. Ab und an kommt aber auch mal JPG zu Einsatz.

Gruß,
Terra
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben