Bild transparent machen mit CSS

[spacle]

Hallo,
ich hätte mal eine kleine Frage, weil ich schon die ganze Zeit gegoogelt habe und keine Lösung gefunden habe. Ich möchte ein JPG an manchen Stellen via CSS oder JS transparent werden lassen, sodass man den Hintergrund durchsieht. Ist dies möglich?

 

[lachender_engel]

Nein. Du kannst mit CSS kein Bild nur teilweise transparent machen. Entweder alles oder nichts.
Speichere das Bild zum Beispiel als GIF oder PNG (letzteres bei hoher einer hohen Farbanzahl) ab. Dabei kannst Du auch Teilbereiche transparent stellen die dann bei der Ausgabe den von Dir gewünschten Effekt bringen.

 

[cebito]

CSS funktioniert da nicht. Aber wenn du das Bild in einem canvas ausgibst, kannst du es per JS manipulieren. Wenn die Möglichkeit besteht würd ich es allerdings vorher mit einem Bildbearbeitungsprogramm freistellen und als .png in die Seite einbinden.

 

[spacle]

vielen dank für die antworten. @cebito: kannst du mir ein beispiel dafür geben wie das als canvas möglich wäre?

ich würde gerne einen ähnlichen effekt erzielen:

 

[cebito]

Der Kreis lässt sich ganz einfach durch CSS border-radius lösen. Die Frage ist ob die Halbtransparenz darinnen bleiben soll/muss.

 

[Steve007]

Bedenke aber, wenn es sich um eine Website handelt, die für die breite Masse sein soll, das manche CSS-Anweisungen von älteren Browsern nicht angewendet werden. Deshalb ist in so einem Fall, wie beim Koala-Bären besser das Bild zu bearbeiten und als .png-Datei abzuspeichern. Das GIF-Format ist zwar auch für ältere Browser die bessere Wahl, dort stehen Dir aber nur 256 Farben zur Verfügung. Deshalb ist dies bei einem Farbfoto nicht ausreichend, es entstehen unschöne Farbübergänge. Es ist immer eine Gradwanderung zwischen Qualität und Browser-Kompatibilität.

 

[spacle]

der kreis war ein beispiel, was ich mir wünsche wären etwas komplexere formen. der verlauf in die transparenz ist ein weiteres problem was ich nicht gelöst bekomme. es wäre mir wichtig das ganze über js und/oder css zu lösen und jpgs zu verwenden, da ich eine optimale seitenladezeit erzielen möchte

 

[cebito]

der kreis war ein beispiel

Zeig doch keine Beispiele sondern ganz konkrete Bilder und markiere was wie transparent sein soll. Dann kann man dir auch sagen, ob so etwas überhaupt machbar ist.

 

[afr0kalypse]

Wenn es um (Halb)transparenzen und komplexe Formen geht, würde ich SVG empfehlen.