Bilder online einfärben

[froemken]

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]

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]

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]

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]

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:

...
<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.

 

[DiableNoir]

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.

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

 

[froemken]

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

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.

 

[DiableNoir]

OK, ich wollte ja nur darauf hinweisen.