Transparente Bilder, in HTML Einstellungen

[lain]

Hallo ,

ich habe ein Bild so ausgeschnitten , dass es einen transparenten Hintergrund hat . Aber wenn ich es als img in meine Seite einfüge , ist das weiße Rechteck wieder da !

Hoffe auf baldigen Rat..

[SteffenG]

Hallo,

hast du das Bild als gif oder als png abgespeichert? Oder als jpg?
Funktioniert's nur im IE nicht, oder auch in vernünftigen Browsern?

Erfahrungsgemäß liegt das Problem eher am Bildbearbeitungsprogramm - bzw. einer falschen Verwendung ebendessen (oder an IE und alpha-Transparenz ). Was verwendest du denn für einen Bildeditor und wie gehst du beim Transparentmachen vor?


Grüße
Steffen

[lain]

Hi ^^


das Bild habe ich als jpg abgespeichert .
Ich habe nur den IE installiert.
Ich hab das Bild in Photoshop ausgeschnitten und danach nochmal in Pain Shop Pro versucht.
Ich mache die Bilder mit dem Lasso transparent , ich wähle Stellen aus und schneide sie dann anschließend aus. Danach markiere ich und kopiere das neue Bild und füge es in einem neuen Fenster in dem Programm zur Probe ein . Das Bild erscheint so wie ich es haben will , mit einem transparenten Hintergrund . Du weißt ja , dieser karrierte Hintergrund. Dann speicher ich das als jpg ab , füge das in HTML ein und muss bei der Vorschau mit ansehen , wie das weiße Rechteck plötzlich wieder da ist.
Was genau meinst du mit Alpha-Transparenz ?
Ich erwähne hier lieber noch , dass ich mit der Funktion filter:alpha die Verschmelzung der Bilder mit dem Hintergrund eingestellt habe . Ich hoffe ich muss es nicht entfernen , weil das nämlich echt gut aussieht !

Der Beitrag wurde von lain bearbeitet: 07.05.2004 - 21:27

[Gast_Apeman_*]

Transparenten Hintergrund kenne ich bei jpg gar nicht, nur bei GIF. Vielleicht liegt darin dein Problem. Speicher es als GIF.

[lain]

Hab ich versucht . Geht nicht . Da passiert das gleiche.

Trotzdem danke ^^

Der Beitrag wurde von lain bearbeitet: 07.05.2004 - 21:59

[amethyst]

Hallo lain,
versuch mal ein anderes grafikprogramm oder speicher es als png.

Gruß Amethyst

[Conny]

Hi,
Du solltest es nicht nur 'umbenennen' , sondern als GIF im Grafikprogramm öffnen, dann die Transparenz neu bestimmen, abspeichern und dann erst sollte es gehen!
Wenn es danach immer noch nicht klappt, taugt das Grafikprogramm nicht, oder Du hast es nicht richtig konfiguriert .

cu
Conny

[SteffenG]

Hallo lain,

Auf dieser Seite wird kurz auf die Unterschiede zwischen jpg, png und gif eingegangen.

JPG unterstützt Transparenz nicht. PNG unterstützt alpha-Transparenz, was bedeutet, dass es Abstufungen in der Durchsichtigkeit erlaubt (ähnlich wie IE, wenn man den alpha-filter verwendet). GIF unterstützt nur binäre Transparenz, also entweder durchsichtig oder nicht.

Mit Photoshop kenne ich mich nicht aus. Aber ich verwende GIMP, und zumindest da ist es so, dass man einen alpha-Layer für's Bild erstellen muss, wenn man Teile davon durchsichtig machen will. Wenn man keinen solchen Layer erstellt, wird das Bild in Gimp zwar durchsichtig, aber beim Speichern geht diese Durchsichtigkeit wieder verloren. Schau also mal nach einer Option für das Bild einen solchen alpha-Layer einzurichten und mache danach dann die gewünschten Teile durchsichtig.

Wenn du mit filter:alpha die Funktion meinst, die nur der IE kann, dann würde ich meinen, dass das wieder raus muss. Ist sch..... Sachen zu verwenden, die nur ein Browser kann ist schlechter Programmierstil und heutzutage absolut uncool.

Mein Lösungsvorschlage wäre, das Bild als PNG mit alpha-Transparenz zu speichern und für den bescheuerten IE einen Hack der Form

QUELLTEXT

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true sizingMethod=scale src='bild.png');

zu verwenden.
Weil dann haben auch vernünftige Browser die Möglichkeit das Bild transparent darzustellen. Sie ignorieren den filter und zeigen das PNG direkt an.


schöne Grüße
Steffen

Der Beitrag wurde von SteffenG bearbeitet: 08.05.2004 - 8:48

[amethyst]

Hallo Steffen,
ich glaube, Dein Vorschlag löst ein Problem, mit dem ich mich grad rumschlage.

Kannst Du mir sagen wie und wo ich diesen "Hack" einbauen muss? Im CSS oder in der Seite bei jedem Bild oder geht das mit Platzhaltern oder geht es nur mit php?

Gruß Uschi

[SteffenG]

Hallo Uschi,

das kommt ins CSS. Bei mir sieht das z.B. so aus:

QUELLTEXT

ul#nav li a{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true sizingMethod=scale src='/i/bT.png');}
ul#nav[id] li a{background-image:url(/i/bT.png);}

Die zweite Regel wird vom IE ignoriert, weil der ja nicht mit Attribut-Selektoren umgehen kann.
In diesem Beispiel ging es konkret darum, in einer Navigationsleiste einen halbtransparenten Hintergrund zu bewerkstelligen. bt.png ist also eine weiße Fläche, die halbdurchsichtig ist. Mit der Filterregel checkt das auch der IE.


schöne Grüße
Steffen

[Google Bot]