Bilder online einfärben

Diskutiere Bilder online einfärben im Internet Forum Forum im Bereich Software Forum; Hallo zusammen, ich möchte bestimmte Teile/Bereiche einer Webseite per CSS einfärben. Bei reinen Texten mit Hilfe von background-color kein...

froemken

SPONSOREN
Threadstarter
Dabei seit
22.02.2005
Beiträge
1.138
Alter
42
Ort
Im Oberbergischen
Hallo zusammen,

ich möchte bestimmte Teile/Bereiche einer Webseite per CSS einfärben.
Bei reinen Texten mit Hilfe von background-color kein Problem. Ab wie macht man das bei Bildern? Ich hab wenig Interesse daran, für jede einzelne Farbe ein weiteres Bild hochzuladen.

Hab schon damit getüftelt mir ein Bild zu nehmen, über dieses komplette Bild einen DIV-Tag zu legen mit grünem Hintergrund und diesen grünen Hintergrund dann mit Hilfe von Opacity zu bearbeiten. Hat nur den Nachteil, dass sämtliche Texte, dann auch grün werden und nur noch 50% Deckkraft haben.

Gibt's oder habt ihr eine andere/bessere Lösung?

Stefan
 

Mike

i7-6700HQ
Dabei seit
21.09.2006
Beiträge
24.384
Ort
Outdoor oder vorm Rechner
Der einzige Browser, der Farbmanagement bietet, ist Safari vom Mac.

Also bleibt dir nix anderes übrig, als für jede Variante ein Bild auf den Server zu legen :(
 

h3r3tic

Dabei seit
14.02.2004
Beiträge
831
Alter
39
Ort
Berlin
Kannst du nicht über den entsprechenden Bereich per JS und CSS ein Div legen was dann die entsprechende Farbe hat ? Damit ist dann aber das darunterliegende nicht mehr zu sehen.
 

DiableNoir

Dabei seit
18.01.2004
Beiträge
6.069
Hab schon damit getüftelt mir ein Bild zu nehmen, über dieses komplette Bild einen DIV-Tag zu legen mit grünem Hintergrund und diesen grünen Hintergrund dann mit Hilfe von Opacity zu bearbeiten. Hat nur den Nachteil, dass sämtliche Texte, dann auch grün werden und nur noch 50% Deckkraft haben.

Kannst du den CSS-Code bzw. den HTML-Code wo du den DIV-Tag machst, mal posten? Normalerweise macht man da eine extra CSS-Klasse dafür. Dann wird auch der Text nicht an anderen Stellen beeinflusst.

Generell würde ich aber sagen, dass es wohl besser ist, dass du - wie Mike40 bereits schon erwähnt hat - einfach eine veränderte Version des Bildes auf deinen Servers stellst. Eine mit einem Grafikprogramm bearbeitetes Bild wird sicher besser aussehen.
 

froemken

SPONSOREN
Threadstarter
Dabei seit
22.02.2005
Beiträge
1.138
Alter
42
Ort
Im Oberbergischen
Erst mal Danke an alle.

Der Grafikdesigner hat mir so eben 45 Hintergrundbilder geschickt. 9 Seiten á 5 Farben.

Ich arbeite online mit dem CMS Typo3 und als ich merkte, dass ich mit dem CSS-Code nicht weit komme habe ich ihn überschrieben. Ist also nicht mehr vorhanden.

Hier also nur mal ganz grob:
HTML:
...
<div style="width: 800; height: 600; background-image: url(./bilder/bg_grau.jpg); margin: 0px; padding: 0px;">
  <div style="width: 800; height: 600; background-color: blau; margin: 0px; padding: 0px; opacity: 0.50; -moz-opacity: 0.50; filter:alpha(opacity=50);">
    <div opacity: 1.00; -moz-opacity: 1.00; filter:alpha(opacity=100);>Ich bin ein Text, der obwohl er in seinem DIV-Tag wieder auf volle Deckkraft gestellt wurde, trotzdem nur mit 50% zu sehen ist. MegaGrrrr</div>
  </div>
</div>

Wenn es also wirklich NUR um ein Bild geht, das einzufärben ist OHNE Text, dann ist das eine hervoragende Lösung.

Stefan

PS: benutzt als Hintergrundbilder schwarz/weiß/grau-Photos, dann kommt der Effekt echt super rüber.
 
Zuletzt bearbeitet:

DiableNoir

Dabei seit
18.01.2004
Beiträge
6.069
Ach so du hast die DIV-Tags verschachtelt. Ja, dann ist es auch keine Wunder, dass der Text dann auch den Stiel hatte.

Aber auch wenn es nur ein Bild ist. Ich würde das eher in einer externen CSS-Datei auslagern oder zumindest an den Kopf der HTML-Seite setzen. :blush

PS: Wieso hat dein dritter DIV-Tag kein Style="..."? So ist die Seite bestimmt nicht (X)HTML-konform.
 

froemken

SPONSOREN
Threadstarter
Dabei seit
22.02.2005
Beiträge
1.138
Alter
42
Ort
Im Oberbergischen
Hier also nur mal ganz grob:

Das ist das Schlüsselwort.
Den ganzen HTML-Post habe ich mal eben aus den Fragmenten, die noch in meinem Kopf waren hier hin gepostet. Nix copy & paste. Bin schon glücklich gewesen, dass ich immer noch so viel geschrieben habe, dass man wenigstens das Problem verstehen konnte :D

Das mit der Vererbung ist mir erst ähm gestern oder vorgestern, mensch was haben wir denn für einen Tag heut', bewusst geworden.

Stefan

PS: Ich arbeite mit Typo3 und dem Stylesheet Selector, der bindet meine Stylesheets per @import ein.
 
Thema:

Bilder online einfärben

Bilder online einfärben - Ähnliche Themen

Bildbearbeitung: Die wichtigsten Basics um typische Fehler zu vermeiden: Spätestens seit der Verbreitung von spezieller Bildbearbeitungssoftware wie Photoshop ist es auch für den engagierten Laien möglich geworden, aus...
Privatsphäre auf technischen Geräten schützen: so geht es: Es gibt heute kaum noch einen Haushalt, in dem kein PC, Laptop, Tablet etc. vorhanden ist. Während es im Jahr 2000 noch unter 50 Prozent der...
Windows 10 Insider Preview Build 17728 im Fast Ring erhält Your Phone App zur Synchronisation des Android- und iOS-Smartphones mit dem PC: Obwohl sich ein Großteil der Windows-Insider-Entwicklungsabteilung mitten im Bug Bash befindet, über welchen die gröbsten Fehler in der...
Im Anfang war der Sputnik-Schock – Eine kurze Geschichte des Internets vom APRANET bis Web 4.0: Wir leben in einem digitalen Zeitalter. Große Teile unser Arbeits- und Privatwelt finden dort statt und werden teilweise sogar hineingetragen. In...
Windows 10 Insider Preview Build 14367 steht sowohl für Desktop- als auch Mobile-Variante mit weiteren Bugfixes bereit: Nachdem Microsoft in dieser Woche schon die Build 14366 für Windows 10 im Fast Ring ausgerollt hat, wird diese jetzt noch durch die neue Build...
Oben