IPB

Willkommen, Gast ( Anmelden | Registrierung )

8 Seiten V   1 2 3 > »   
Reply to this topicStart new topic
> Transparente Bilder, in HTML
lain
Beitrag 05.05.2004 - 22:44
Beitrag #1


is getting harder


Gruppe: User
Beiträge: 28
Mitglied seit: 11.04.2004
Mitglieds-Nr.: 2.286



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..
Go to the top of the page
 
+Quote Post
SteffenG
Beitrag 06.05.2004 - 0:29
Beitrag #2


looks good


Gruppe: User
Beiträge: 75
Mitglied seit: 12.11.2003
Mitglieds-Nr.: 1.642



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 wink.gif). Was verwendest du denn für einen Bildeditor und wie gehst du beim Transparentmachen vor?


Grüße
Steffen
Go to the top of the page
 
+Quote Post
lain
Beitrag 07.05.2004 - 21:26
Beitrag #3


is getting harder


Gruppe: User
Beiträge: 28
Mitglied seit: 11.04.2004
Mitglieds-Nr.: 2.286



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 ! smile.gif

Der Beitrag wurde von lain bearbeitet: 07.05.2004 - 21:27
Go to the top of the page
 
+Quote Post
Gast_Apeman_*
Beitrag 07.05.2004 - 21:31
Beitrag #4





Gäste






Transparenten Hintergrund kenne ich bei jpg gar nicht, nur bei GIF. Vielleicht liegt darin dein Problem. Speicher es als GIF.
Go to the top of the page
 
+Quote Post
lain
Beitrag 07.05.2004 - 21:57
Beitrag #5


is getting harder


Gruppe: User
Beiträge: 28
Mitglied seit: 11.04.2004
Mitglieds-Nr.: 2.286



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

Trotzdem danke ^^

Der Beitrag wurde von lain bearbeitet: 07.05.2004 - 21:59
Go to the top of the page
 
+Quote Post
amethyst
Beitrag 07.05.2004 - 23:24
Beitrag #6


Kann auf gar keinen Fall einen Videorekorder programmieren!
***

Gruppe: User
Beiträge: 210
Mitglied seit: 08.12.2003
Wohnort: Bad Zwischenahn
Mitglieds-Nr.: 1.751



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

Gruß Amethyst
Go to the top of the page
 
+Quote Post
Conny
Beitrag 08.05.2004 - 8:40
Beitrag #7


Kommt Zeit, kommt Rat, kommt Conrad!
Gruppensymbol

Gruppe: Mods
Beiträge: 1.169
Mitglied seit: 21.11.2001
Wohnort: Altenkirchen, Westerwald
Mitglieds-Nr.: 42



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

cu
Conny
Go to the top of the page
 
+Quote Post
SteffenG
Beitrag 08.05.2004 - 8:46
Beitrag #8


looks good


Gruppe: User
Beiträge: 75
Mitglied seit: 12.11.2003
Mitglieds-Nr.: 1.642



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
Go to the top of the page
 
+Quote Post
amethyst
Beitrag 08.05.2004 - 13:01
Beitrag #9


Kann auf gar keinen Fall einen Videorekorder programmieren!
***

Gruppe: User
Beiträge: 210
Mitglied seit: 08.12.2003
Wohnort: Bad Zwischenahn
Mitglieds-Nr.: 1.751



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
Go to the top of the page
 
+Quote Post
SteffenG
Beitrag 08.05.2004 - 14:37
Beitrag #10


looks good


Gruppe: User
Beiträge: 75
Mitglied seit: 12.11.2003
Mitglieds-Nr.: 1.642



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
Go to the top of the page
 
+Quote Post
Google Bot
Beitrag
Beitrag #


Google Ads









Go to the top of the page
 
Quote Post

8 Seiten V   1 2 3 > » 
Reply to this topicStart new topic
9 Besucher lesen dieses Thema (Gäste: 9 | Anonyme Besucher: 0)
0 Mitglieder:

 



RSS Vereinfachte Darstellung Aktuelles Datum: 28.03.2024 - 11:23

taschenkalender
expertise-panel IPS Driver Error

IPS Driver Error

There appears to be an error with the database.
You can try to refresh the page by clicking here