Anmelden

Archiv verlassen und diese Seite im Standarddesign anzeigen : HTML/CSS Frage



zezeri
05.03.2013, 18:39
Hi Leute,

wir machen grade eine Webseite für unser Abi Projekt und es gibt da ein Problem.

Das ist der Design Entwurf aus Photoshop, so soll die Seite später aussehen:
http://www.abload.de/img/webseiteentwurflayoutdsq9z.jpg
Allerdings wollen wir die Flaschen als eigenständige Bilder/Objekte einfügen. Wie kriege ich es hin, dass die Flaschen sich nahtlos in den Palmen Hintergrund einfügen? Ich habe schon alles um die Flasche herum transparent gemacht in Photoshop, aber es bleibt irgendwie weiß, sodass die Flasche zwar abgebildet wird, aber quasi auf einer "weißen Leinwand"

Lösungen????

Bump :)

Biggreuda
05.03.2013, 20:49
An welcher Stelle hat das was mit HTML/CSS zu tun? o_0
Wenn du die Flaschen als Grafiken ab speicherst, dann nimm als Format .gif.
JPGs unterstützen keine Transparenz.
Wenn Abwärtskompatibilität nicht wichtig ist, dann kannst du auch png nehmen, da wird auch Teiltransparenz unterstützt.
Dazu sollte es aber gerade mal 10.500.000 Ergebnisse (https://www.google.de/webhp?sourceid=chrome-instant&ion=1&ie=UTF-8#hl=de&gs_rn=5&gs_ri=psy-ab&tok=VKsUgWkuouUB_Ir-mn_Y9g&cp=19&gs_id=av&xhr=t&q=transparente+grafik&es_nrs=true&pf=p&safe=off&sclient=psy-ab&oq=transparente+grafik&gs_l=&pbx=1&bav=on.2,or.r_gc.r_pw.r_cp.r_qf.&bvm=bv.43148975,d.d2k&fp=393a6bc58cdc622b&ion=1&biw=1920&bih=951)bei Google geben :roll:

Sommermn
05.03.2013, 20:54
Speicherst du die Bilder der Flaschen als jpg ab?
Tip: PNG wäre das richtige Format, da jpg leider keine Transparent unterstützt :smile:

EDIT: zu langsam..

zezeri
05.03.2013, 22:43
Tausend Dank Leute!
Ich hab schon an Masken et cetera gedacht - viel zu kompliziert.

XD

sic
06.03.2013, 11:22
An welcher Stelle hat das was mit HTML/CSS zu tun? o_0
Wenn du die Flaschen als Grafiken ab speicherst, dann nimm als Format .gif.
JPGs unterstützen keine Transparenz.
Wenn Abwärtskompatibilität nicht wichtig ist, dann kannst du auch png nehmen, da wird auch Teiltransparenz unterstützt.
Dazu sollte es aber gerade mal 10.500.000 Ergebnisse (https://www.google.de/webhp?sourceid=chrome-instant&ion=1&ie=UTF-8#hl=de&gs_rn=5&gs_ri=psy-ab&tok=VKsUgWkuouUB_Ir-mn_Y9g&cp=19&gs_id=av&xhr=t&q=transparente+grafik&es_nrs=true&pf=p&safe=off&sclient=psy-ab&oq=transparente+grafik&gs_l=&pbx=1&bav=on.2,or.r_gc.r_pw.r_cp.r_qf.&bvm=bv.43148975,d.d2k&fp=393a6bc58cdc622b&ion=1&biw=1920&bih=951)bei Google geben :roll:

gif bringt dir auch nichts. du kannst png auch abwärtskompatibel machen (pie.htc, imagealphaloader etc)


Speicherst du die Bilder der Flaschen als jpg ab?
Tip: PNG wäre das richtige Format, da jpg leider keine Transparent unterstützt :smile:

EDIT: zu langsam..

es geht sogar noch einfacher


Tausend Dank Leute!
Ich hab schon an Masken et cetera gedacht - viel zu kompliziert.

XD

wenn du es nicht so richtig genau nehmen willst, kannst du den bildern auch einfach per css opacity: 0.7 geben (oder filter: alpha(opacity=70 beim IE).

ansonsten wie die anderen gesagt haben, das bild aus photoshop heraus mit transparenz speichern, ganz normal als hintergrundbild/ image im css bzw html einbauen, und für ie6 und konsorten mal nach "png fix alphaimageloader" googlen ;)

Biggreuda
06.03.2013, 12:38
So lange die Flaschen nicht halb durchsichtig sein sollen und eine feste Kontur haben, ist png imho too much ;)

sic
06.03.2013, 14:47
So lange die Flaschen nicht halb durchsichtig sein sollen und eine feste Kontur haben, ist png imho too much ;)

nicht nur in deiner humble, sondern auch in meiner humble opinion. hatte es so verstanden dass die generell etwas transparent sein sollen. denke mal mit harter kontur sieht nicht aus o:

egal