Antworten auf deine Fragen:
Neues Thema erstellen

Bild transparent machen mit CSS

spacle

von fraglichem Nutzen

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

Aktives Mitglied

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

undefined

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

von fraglichem Nutzen

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:
 
Zuletzt bearbeitet:

cebito

undefined

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

Steve007

Noch nicht viel geschrieben

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

von fraglichem Nutzen

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
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben