Hintergrundbild mit alternative Farbe

  • Hi,

    der Titel klingt jetzt nicht so begriffsergreifend, allerdings habe ich ein kleines Problem.


    Mein Stylecode sieht so aus:

    Code
    1. #sliderbackground {
    2. background: url(XXX) no-repeat right;
    3. width: 100%;
    4. height: 230px;
    5. }


    Allerdings möchte ich dort noch beim background eine Farbe als alternative nehmen, welche von dem Bild herausgefiltert wird. Zum Beispiel von Stelle 1px, also sozusagen dann der erste Pixel oben links im Bild. Dadurch soll dann halt der HEX Farbcode ermittelt und als Hintergrundfarbe benutzt werden. Ist das möglich?


    Ich hoffe es ist die richtige Kategorie und vielen Dank im voraus. Bei Fragen, bitte nachfragen, habe es versucht so gut wie möglich zu erklären ;(

  • Nach allem was mir bekannt ist, geht das mit CSS nicht. Die einzige Lösung, die mir einfällt ist, mit Canvas das Bild zu zeichnen. Dann hat man Zugriff auf die Pixel, kann die Farbe ermitteln und die Hintergrundfarbe des Containers setzen. Kannst Du das nicht manuell machen oder muss es sich dynamisch verschiedenen Bildern anpassen?

  • keine Ahnung welche Farbe du filtern möchtest, aber Alternativfarben lassen sich doch mit bachround notieren.

    background:(url) no-repeat 0 0 #000;

    Oder habe ich was falsch verstanden.

  • Danke für die Antworten. Da es sich immer wieder um ein anderes Hintergrundbild handelt, müsste es immer eine andere Farbe sein. Ich habe es jetzt anders gelöst und manuell die Farbe ermittelt und werde es zukünftig auch so machen.

  • Geht aber problemlos auch automatisch: