HowTo: bild rundherum in den hintergrund übergehen lassen

hallo,

wie stelle ich es mit einfachen html-mitteln an, wenn ich ein bild in den seitenhintergrund fließend übergehen lassen möchte (rundherum) ? das hat sicher was mit transparenz zu tun, aber ich habe mit grafikprogrammen gar nichts am hut .... wie gehe ich da vor? wsa brauche ich dazu? erledigt das html alleine oder muß ich die bilddatei in einem grafikprogramm bearbeiten? wenn ja, wie geht das am einfachsten?

vielen dank!

IMHO sollte das noch nciht über html funktionieren, transparenzen ja aber nur für komplette Bilder. Dementsprechend solltest du dein Layout 1:1 in einem Grafikprogramm anfertigen, am besten eigneten sich Photoshop dazu, als Open Source alternative benutze ich GIMP es ist vom Menü her ähnlich dem Photoshop. Dort kannst du dann alles so "zeichnen" wie du dir es dann vorstellst. Dann speicherst du dir einzelne Bilder und bastelst dir sie in dein HTML ein.

danke,

ja, da muß ein bildbearbeitungsprogramm ran ... man lernt ....

evtl mit einem radierer arbeiten

das bild als .png speichern, das kann halbtransparenz

gruß g.

png: halbtransparenz?

heißt das, daß keine 100%ige durchsichtigkeit möglich ist?

klar

gif z.b. kann nur ganz oder garnicht
und du willst ja einen kontinuierlichen übergang
.
EDIT :
.
als beispiel, nur mal schnell hingesudelt

heißt das, daß das png-format aus technischen gründen keinen transparenzverlauf von 0-100 zuläßt? meine bisherigen informationen lauten anders ...

klar tuts das
sieh dir die bilder an
das linke ist png das rechte das gleiche in gif

...wobei die rechte Version natürlich auch in PNG ginge, falls man das so haben will.

PNG ist allerdings für Fotos nicht so toll geeignet, weil es nicht sehr stark komprimiert (zwar verlustfrei, aber das ist ja da meist egal), als Folge hätte man dann relativ lange Ladezeiten. Wenn man das besser geeignete JPG nutzen will, dann gibt es da natürlich keine Transparenz. Aber man kann ja die Hintergrundfarbe der Webseite im Bildbearbeitungsprogramm so an den Rändern einfließen lassen, daß es transparent aussieht und man eben keinen rechteckigen Rand sieht.

Ohne GIMP/Photoshop/wasweißich geht es jedenfalls nicht.

Najaaaa.... man könnte mit Opacity arbeiten... aber das würde sozusagen den "alphawert" des ganzen bildes auf einmal ändern....
d.h. der hintergrund würde überall mehr ode rminder gleichmäßig durch das bild scheinen....
Außerdem ist opacity AFAIK noch keine W3C-Standard-CSS-Geschichte, sondenr müsste getrennt über -moz-opacity und filter:alpha (oder so ähnlich) für verschiedene browser definiert werden. Es gibt ja mit diversen JS-Bibliotheken möglichkeiten Elemente "faden" zu lassen, die soweit ich weiß mit genau sollten Methoden intern arbeiten, also kontinuiertlich mit einegen ms verzögerung den opacity bw. alphawrt erhöhen/verringern um etwas ein- bzw. aus-faden zu lassen...
aber der "klassische" und wohl auch weniger fummelige weg führt über Transparente Grafiken.
Allerdings wage ich mich dunkel zu erinnern dass zumindest der IE einige einschränkungen besaß in sachen Grafikformate... ob der 6er z.b. schon PNGs kann weiß ich nicht...
SVG-Vektorgrafiken hat der 8er immernoch nicht gelernt... -.-

merci leute,
mir ist gedient!

Ge0rgy schrieb:

Außerdem ist opacity AFAIK noch keine W3C-Standard-CSS-Geschichte, sondenr müsste getrennt über -moz-opacity und filter:alpha (oder so ähnlich) für verschiedene browser definiert werden.
[...]
Allerdings wage ich mich dunkel zu erinnern dass zumindest der IE einige einschränkungen besaß in sachen Grafikformate... ob der 6er z.b. schon PNGs kann weiß ich nicht...
SVG-Vektorgrafiken hat der 8er immernoch nicht gelernt... -.-

Zum Vergrößern anklicken....

Bei zwei Dingen muss ich hier etwas anmerken: der IE kann in Version 6 PNG-Bilder anzeigen, unterstützt dabei aber leider noch keinen Alphakanal, d.h. keine Transparenzen. Ab Version 7 ist das aber kein Thema mehr. Alleine für den IE6 sollte man sich im Allgemeinen heute aber keinen extra-Aufwand mehr machen, die 7er und 8er-Versionen reichen schon aus für entnervte Arbeitstage.

Dann noch zu -moz-opacity: wir hatten das bei uns auch lange in Verwendung, bis wir vor einem halben Jahr darauf gestossen sind, dass das schon seit Jahren veraltet ist: seit Version 3.5 unterstützt der Firefox die Eigenschaft "-moz-opacity" nämlich NICHT mehr, stattdessen schreibt man (anscheinend schon seit einer Vorversion von Firefox 1.0) einfach nur "opacity" ohne das "-moz-" vornedran.