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..

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

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 !

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

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

Trotzdem danke ^^

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

Gruß Amethyst

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

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 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

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

Hallo Uschi,

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

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

Danke Steffen,

das hilft, was mich aber irritiert sind die Hochkommas beim scr=

Deswegen noch mal die Frage, sind die Hochkommas relevant oder gehen da auch normale Anführungszeichen?

Uschi

Hallo Steffen ,


Ich verstehe ehrlichgesagt noch nicht ganz , wo ich diesen "Hack" genau einbauen muss in CSS . Über Body {} oder wo sonst ? Ich kenne mich mit solchen Codes gar nicht aus.

Was soll an dem Style so uncool sein ? Das sieht doch total gut aus . Was genau meinst du mit uncool ? Das ist schon sch**sse etwas zu verwenden , welches nur ein einziger Explorer anzeigen kann , aber mir geht es um das Design.

Hi Lain,
es ist uncool wenn Du in Deiner Seite irgendwelcher Gimmicks packst, die nur vom IE gezeigt werden können, User die mit anderen Browser unterwegs sind, haben eben nichts davon, sowas ist nicht nett, also uncool...
(ein Beispiel wäre gefärbte Scrollbars oder überblendungen beim Seitenwechsel)

Der Code-einbau sollte in einer CSS-Datei erfolgen, also eine Datei mit Endung *.CSS und nicht *.HTM .

Klar, man kann es natürlich auch auf der HTM-Seite unterbringen, dann aber im HEAD-Bereich zwischen <STYLE TYPE="text/css"> <!--und--> </STYLE>.

cu
Conny

Sehr schlechtes Beispiel. Warum soll man die Scrollbars nicht entsprechend der Farbgebung der Website einfärben, wenn immerhin noch weit über 90% der User im WWW den MSIE nutzen? Nur weil 10% dann davon nichts haben?

Da sag ich nur, ihr Problem. Ich favorisiere auch den Firefox der das nicht anzeigt, habs aber dennoch drin.

Alle MSIE-User könnens genießen. Was ist dagegen zu sagen?

Bitte, kommt von eurem hohen "Ross" herunter auf den Boden der Tatsachen.

Sowohl Photoshop als auch PaintShopPro machen problemlos gifs mit transparenten Hintergründen. In PS einfach so: bei Datei - für Web speichern kommst Du in einen ganz neuen Dialog. Dort rechts kannst Du so allerlei einstellen. Halt gif auswählen und darunter transparenter Hintergrund anklicken. Dann bekommt das Bild auch einen transparenten Hintergrund.

Aber der Nachteil von gif ist halt: nur maximal 256 Farben, kein Halbtransparenz möglich. Für Fotos, Bilder mit Verläufen etc. also nicht geeignet. Da ist es besser, den Webhintergrund (Farbe, Muster) gleich als Hintergrundebene einzubauen und dann das Bild samt Hintergrund als jpg zu speichern, weil in dem Fall die Qualität und die Komprimierung einfach besser wird. Und so kannst Du auch weiche Übergänge erreichen z.B.

Bei PSP geht es ähnlich, hatte mir da mal aus Neugierde die Probeversion geladen. Dort über Datei-Export-gif,jpg oder png-Optimierung auswählen. PNG geht mit Steffens Trick natürlich auch - ansonsten zeigt es der IE eben nicht richtig an, sondern baut einen weißen Hintergrund ein.

Zu den Browser-Effekten: solange man weiß, was man da macht, und darauf achtet, dass es in jedem Browser vernünftig aussieht (nicht zwingend gleich) - kann man auch Spezialeffekte einbauen (überlege gerade, ob ich beim Relaunch meiner anderen HP mal Special-Effects für Mozilla&Co einbaue - natürlich so, dass die Page auch mit dem IE gut anzugucken ist). Sowas finde ich persönlich legitim.

Grüße, Terry

Hallo Uschi,

für die Hockommas dürfte es egal sein, welche du nimmst. Kannst du ja auch einfach ausprobieren... Ich vermute, es ist wie in anderem CSS auch, wo es egal ist, welche man verwendet, sie müssen nur korrekt geschachtelt sein.


@lain: In meinem Beispiel habe ich das Bild als Hintergrund für ein li-Element verwendet. Ich weiss nicht, was du machen willst, aber schätzungsweise musst du den Code im CSS für ein img-Element einbauen.

Alles, was nicht standardkonform, also proprietär ist, ist uncool. Wenn etwas standardkonform ist, aber von einigen Browsern nicht unterstützt wird, habe ich meistens kein Problem damit, es trotzdem zu verwenden, wenn das Ergebnis auf diesen anderen Browsern trotzdem gut aussieht. Aber Zeugs zu verwenden, dass nur wenige Browser können (oder nur ein Browser), weil sie sich auf was geeinigt haben (oder der Marktdruck recht groß war), was nicht dem Standard entspricht, das ist uncool.
Meine Seiten schauen auf allen Browsern (sehr) ähnlich aus und ich verwende nix, das nicht jeder Browser können kann. Das filter-Ding ist das erste und bisher einzige Mal, dass ich sowas überhaupt einbaue. War auch eher aus technischem Interesse.
Meiner Meinung nach sollte man nicht zu sehr auf den IE eingehen, weil er schlicht schlecht ist. Naja, ok, lassen wird das...

BTW es ist mir gerade mal sch.... egal, welche Farbe meine Scrollbalken haben.



schöne Grüße
Steffen

Hallo,



Darum geht es gar nicht.



Ich meine auch das, dass der springende Punkt ist. Wozu gibt es Standards? Nur weil sich ein Marktführer, der die Standards ebenfalls anerkannt hat, aufschwingt den Standard zu erweitern obwohl er diesen noch nicht einmal vollständig umgesetzt hat, muss man diese Erweiterungen ja nicht unbedingt nutzen. Und wenn man es denn einsetzt, dann bitte so, das die "Kleinen" trotzdem eine vernünftig nutzbare Webseite vorfinden. Sicher, man kann dann bisweilen - so wie von Steffen gezeigt - auch Workarounds einsetzen. Manchmal muss es sogar sein, um überhaupt einen Standard zu realisieren, und dann nutzt man Bugs aus, damit es wenigstens wie der Standard aussieht.

Doch wenn es anders wäre, dann wäre es ja langweilig.

Hi Apeman,

DAS halte ich für ausgesprochen uncool, ich meine wo liegt denn da -für Dich- die Grenze?
Es surfen beispielsweise auch viele Sehbehinderte im Netz, viele Seiten werden sie nicht 'sehen' bzw. lesen können, schlicht wegen der schlechte machart!
Auch 'ihr problem?'

So eine Einstellung halte ich persönlich für , sagen wir mal: 'wenig sozial'.

Sicher, ist meiner Meinung nicht das Maß aller Dinge, aber Du hast vielleicht mal eine Minute Zeit darüber nachzudenken...

Nachtrag: mit 'hohen Rößern' hat das nun wirklich nichts zu tun, mir scheint, Du bist manchmal etwas voreilig, oder hast nicht ganz begriffen worum es geht...

cu
Conny

Hallo Ihr Lieben,
es ging hier um transparente Bilder, nur noch mal zur Erinnerung ;-)) Die Tipps waren klasse und es wäre schade, wenn die jetzt überlesen würde, weil mal wieder jemand meinte, seinen Frust auf Gott und die Welt hier ablassen zu müssen.

Die leidige Browser-Diskussion (wir alle kämpfen mit den verschiedenen Zickigkeiten der Browser) gehört m.e. in Talktime und da können wir uns dann gerne gegenseitig die "Köpfe einschlagen" ;-).

Achja Apeman, das höchste Glück dieser Erde liegt auf dem Rücken der Pferde, soll mal ein ganz Großer gesagt haben ;-))

Gruß Uschi

Nun, ohne dir nahe treten zu wollen ist es völlig irrelevant für mich was andere als uncool finden. Deine Frage nach der Grenze ist ganz leicht zu beantworten und wurde von i.b.g schon beantwortet:

Das sehe ich genauso. Nichts spricht dagegen solange Sehbehinderte damit keine Probleme haben und andere Browser (ich nutze Firefox) das keine Probleme bereitet, was es definitiv nicht macht. Warum sollte ich die über 90% von Usern also nicht bedienen?

Wie schon erwähnt, weicht aber vom Thema ab.

Uschi schrieb:


Nur weil es so ist, muss ich damit nicht einverstanden sein, oder?

Nein, sondern weil Scrollbars nicht mehr zur Webseite gehören. Sie sind Teil der Benutzeroberfläche des Besuchers und von solchen sollte man tunlichst die Finger lassen. Dazu zählen insbesondere auch Statusleisten, Menüleisten und Kontextmenüs, da hat der Webautor nix dran zu drehen. Es sei denn, er will seine Besucher verunsichern. Otto-Normalsurfer erwartet seine Benutzeroberfläche in gewohnter Form und Farbe, Manipulationen daran (in aktuellen Browsern ohnehin nicht mehr wirklich machbar) beeinträchtigen die Benutzbarkeit der Seite.

Abgesehen davon sind gefärbte Scrollbars nur mit nichtstandardisierten, M$-spezifischen Erweiterungen zu realisieren. Mit CSS hat das nichts mehr zu tun.


Ich reite nicht, ich gehe zu Fuß oder nutze den ÖPNV.

Gruß
n!

Ich akzeptiere deine Meinung, teile sie aber nur zum Teil. Es wurde gefragt wieweit man geht. Für mich ist die akzeptable Grenze genau die Scrollbars. Ich stimme mit dir überein von Menüleisten, Satusbar die Finger zu lassen. Nicht aber bei den Scrollbars.

Wenn jemand ins Internet geht, hat er einfach nicht mehr seinen gewohnten Desktop vor sich. Es überfallen ihn hunderte verschiedener Designs, die nichts mit seinen Desktopeinstellungen mehr gemein haben. Wenn ich also eine Webseite, sagen wir in Pechschwarz hätte, spricht aus meiner Sicht nichts dagegen, wenn ich die Scrollbars entsprechend dunkel gestalte, so das sie zum Gesamterscheinungsbild passen. Solange die Seite dabei ganz normal benutzbar bleibt, finde ich das okay.

Insofern sind sie ein Teil der Webseite.

Akzeptiert.


Gerade darum halte ich es für fatal, dem Benutzer auch noch das letzte Fünkchen Vertrautheit zu nehmen. Jede Seite hat ein eigenes Navigationskonzept etc., der Besucher muß sich jedesmal neu orientieren. Wenn er dann auch noch suchen muß, wo die Scrollbalken geblieben sind ...

Für mich als Autor endet die Webseite und somit mein Einflußbereich im Viewport des Browsers, alles drumherum geht mich nichts mehr an.

Noch schlimmer sind allerdings die Leutz, die browserinterne Funktionen mit Javascript oder Flash nachbauen wollen: JS-Scrollbars, JS-Back-Button etc.

Gruß
n!

Ja, und da sind wir uns wieder einig. Das liegt natürlich in der Verantwortlichkeit des Betreibers einer Website, wie er welche Farben verwendet. Leider wird die zu oft falsch (weil gar nicht) verstanden und es wird alles machbare geändert. Da wär es besser gar nichts daran zu ändern.

Aber, mal nebenbei, die Scrollbalken sind immer rechts, oder?

Geh mal mit IE auf http://www.microsoft.com/israel/

Gruß
n!

Versteh, zwar keine eingefärbten Scrollbars, aber eben links.

Wußte gar nicht, dass das auch geht. Das ist ein gutes Beispiel. Aber wer sagt dir, das ein Windows für diesen Sprachraum nicht alles anders herum hat? Wenn ein Windows für Israel genauso falsch von vornherein ist, dann würde ich das auch wieder als gelungenes Beispiel bezeichnen. Denn ich gehe davon aus, weil die Seite nicht in Englisch gestaltet wurde, soll sie auch nur die Gewohnheiten vor Ort befriedigen.

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

Ok diesen COde hab ich jetzt als CSS abgespeichert. Aber nur mit diesem Inhalt . Und wie baue ich das jetzt da rein ? Bildname ist natürlich geändert..wenn ich mehrere Bilder in diesem Code einbringen will , trenne ich sie durch ein Komma ?


hoffe auf Hilfe...(kenn mich in dem Bereich halt , wie gesagt , gar nicht aus.)

Hallo

Lies mal das hier. Da werden die verschiedenen Möglichkeiten,
CSS-Formate in eine HTML-Seite einzubinden, erklärt.

Tschö, Auge

PS: Dein Format ist aber eigentlich kein CSS-Format (wegen MSIE-only).

@Auge

Danke aber ich hab da nicht das gefunden wonach ich suche.. Mein Ziel ist es momentan einfach , dass die Funktion von filter:alpha für Bilder auch im Netscape genau so wie im IE angezeigt werden kann.´

Kann mir jemand diesen "Hack" genauer erklären ? Reicht auch 'ne grobe Erklärung..

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

Als ich das mal in die HTML Datei eingebunden habe , war die filter:alpha Funktion plötzlich auch im IE blockiert . Es kommt also wohl drauf an wo ich diese neue CSS Datei einbaue.

Hallo Lain,
ich will ja nicht meckern, aber die Antwort zu Deiner Frage steht in genau diesem Thread auf Seite 1, da hat Steffen, weil ich nachgefragt habe, den Einbau ins CSS an einem Beispiel erklärt.

Das eigene Thema gründlich zu lesen, sollte man voraussetzen können. Sorry ;-))

Gruß Uschi

Hallo lain,

vielleicht solltest du dich erstmal auf Sachen beschränken, die du verstehst und korrekt anwenden kannst.
Verwende also ein binärtransparentes gif, oder diesen Javascript-Pfusch, lade die Seite in deinen InternetExplorer und ärgere dich, für was für einen besch####### Browser du deine Seiten entwickelst.

Vielleicht solltest du dich auch ein bisschen über HTML und CSS informieren. Außerhalb dieses Forums. Google ist dein Freund.
Aber du brauchst dich natürlich nicht zu informieren. Gibt genügend Leute da draußen, die Seiten ins Netz gestellt haben, ohne zu wissen, was sie da tun.


Grüße
Steffen

Ich zitiere mich mal selbst:



Was meinst du, was das, insbesondere der Teil zwischen den Klammern, aussagt?
Warum steht da wohl mitten in deiner Zeile das Wort Microsoft?

Der Weg, den du beschreiten willst, führt nicht zum gewünschten Ziel. Ergoogle dir,
wie man in einem Gif eine Farbe transparent schaltet, das funktioniert in allen
graphischen Browsern.

Tschö, Auge

Ich dreh langsam am Rad !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Kann mir bitte, bitte mal jemand Schritt für Schritt erklären, wie ich in einem .gif im IrfanView den Hintergrund transparent kriege.............Aaaaaaaah Argh!

Ich werd bekloppt! Treck blöder!

Im IrfanView?

Gar nicht, soviel ich weiß...

Ist ein super Bildbetrachter, der auch wirklich viel kann - aber trotz allem ist es kein vollwertiges Grafikprogramm - für manche Sachen braucht man dann eben doch ein "echtes" Grafikprogramm... (z.B. Gimp, wenns kostenlos sein soll...)

Mit IrfanView kenne ich auch keine Möglichkeit. Ich nutze dazu das kleine Freewaretool Ulead Gif-Animator. Such mal über Google danach. Alternativ kannst du mir auch deine Emailadresse zukommen lassen, dann schicke ich es dir (2 MB ungepackt). Würde es noch zippen.

Danke Apeman!

Hey Apeman,

jetzt weiss ich, was mir die ganze Zeit gefehlt hat!

Conny wird es dir auch danken...

Super!

Hallo,
das war jetzt ein 'insider', dazu muß man wissen, daß ich ihm bis dahin seine Bilder 'durchsichtig' gemacht habe

Conny

Tja... äh...

Hatte nicht damit gerechnet mit nur einer Hilfe zwei Leute zufrieden stellen zu können.
Deinem Hinweis entnehme ich, das du mit dem kleinen Tool klar kommst, Klasse.

Hallo alle,

muss das denn unbedingt CSS sein oder kann das auch HTML sein?

Ich hatte auf einer Seite etwas gefunden aber es funktioniert leider nicht ...

<ELEMENT STYLE="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sProperties)" src="bildname.png">

oder hab ich was falsch gemacht?

Bekommt man hier doch so viele Antworten ...

Du hast nicht zufällig schlecht geschlafen? Es gibt hier kein Recht auf Antworten. Vielleicht weiß einfach niemand was zu Deiner Fragestellung. Im übrigen ist das was Du da gepostet hast, auch CSS und kein HTML ...

Mann, Mann, Mann ... :-(

Hallo,

entschuldige, dass ich mich erst jetzt melde, aber ich hatte bis gerade eben auch noch ein Leben.
Was du da meinst, dürfte MS-spezifischer Tant und somit ein absolutes 'Bäh' sein. Ob die Syntax stimmt, kann ich dir nicht sagen, da ich mich mit den MS-Filtern nicht beschäftige.

Ciao
Heinzelhund

Hey, hey, hey ...

Ich hab auch keinen gezwungen zu antworten sondern nur eine Frage mit etwas ironie gestellt. Aber wenn das CSS währe wüsste ich warum es nicht funktioniert.

Danke für die Hilfe!

[x] Ich erkenne Ironie, wenn ich sie sehe.
[ ] Dein Beitrag war ironisch.

Wenn du das sagst muss das ja so sein! :-)

Sorry, dass ich mich einmisch.

Wie wäre es, wenn Du den Thread von Anfang an lesen würdest, Deine Frage scheint Steffen schon längst beantwortet zu haben.

Dass er nicht gewillt ist, das noch mal zu tun, kann ich irgendwie nachvollziehen zumal es ja hier nicht einmal was mit richtig Suchen zu tun hat. Einfach mal einen Thread komplett lesen und dann vielleicht eine Zusatzfrage stellen, wenn was nicht klar ist, dann kommen auch Antworten.

Gruß Amethyst

dazu fällt mir http://www.karzauninkat.com/Goldhtml/goldhtml.htm#1 und#2
ein ist zwar schon alt aber immer noch aktuell
mm

Kennst du Ulead Photo Impackt, Ulead Photo Express oder Infran View ?
Das sind ziemlich gute Bildbearbeitungsprogramme.