HintergrundBILD einfärben

[Fir Kay]

Heyho,

ich suche nach einer Möglichkeit ein Hintergrundbild einzufärben. Ich versuche derzeit mir einen Fortschrittsbalken zu designen und binde dazu ein bestimmtes Bild ein, welches horizontal wiederholt wird. Je nachdem wie breit der Container vom Hintergrundbild ist, zeigt es an wie weit der Fortschrittsbalken ist. Dabei möchte ich jedoch, dass man die Farben selber bestimmten kann. Dazu habe ich für die einzelnen Elemente des Fortschrittsbalken ein schwarz/graues Bild erstellt, welches ich nun einfärben möchte. Ich finde jedoch nur Möglichkeiten den ganzen Hintergrund einzufärben, was mir jedoch nicht hilft, da zwischen den einzelnen Elementen transparente Leerräume sind.

So sieht es aus:


So sieht ein Element aus:


Gibt es eine Möglichkeit nur diese schwarzen Balken (quasi das Hintergrundbild des Containers) einzufärben?

MfG
Simon

 

[omoxen]

mit Canvas geht das, ansonsten könntest du zwei Hintergründe verwenden. Einen für die Farbe und den zweiten mit einem Bild, das nur innen transparent ist.

 

[Fir Kay]

Von Canvas habe ich ehrlich gesagt, keine Ahnung. Da bräuchte ich eine Starthilfe. So auf den ersten Blick steige ich da nicht direkt durch.

Mit den zwei Hintergründen ist zwar auch eine interessante Idee, scheitert aber daran, dass der Hintergrund des äußeren Containers (in dem Screenshot oben, das Graue) ebenfalls vom User bestimmt werden kann. Somit würde das kein Sinn machen.

 

[omoxen]

du könntest auch mehrere elemente hintereinander legen und denen dann einen border-color für die hintergrundfarbe geben und den background auf transparent setzten.