"Farbüberlagerung" eines .png per :hover etc.

    hallo!
    ich bin neue hier und habe sicher auch die ein oder andere "dumme" frage, jedoch habe ich jede zuvor versucht zu googlen und möglicherweise aufgrund schlechter umschreibungen nichts gefunden.
    jetzt hoffe ich, hier kann mit jemand weiterhelfen.

    problem:

    ich möchte ein bild.png als "menüsymbol" verwenden, das bei überfahren mit der maus die frabe ändert ->aber NUR an den stellen die auch farbe haben!!! also nicht die ganze bildflächte.
    der hintergrund hat einen verlauf daher kann ich es mit ":hover background-color" nicht trixen...
    gibt es hierfür eine gute lösung?


    danke schonmal!

    ps: es sollte dabei wenn möglich eine -transition z.b. ease-in-out; auch möglich sein.

    Erstell im Bildprogramm ein zweites Bild mit der gewünschten Farbe, dann kannst du bei :hover einfach das Hintergrundbild ändern indem du die andere URL angibst.

    Ungefähr so:

    Code
    #navi a {    background: url(media/images/navi_normal.png) transparent; }


#navi a:hover {    background: url(media/images/navi_hover.png) transparent; }

    Da ich noch nicht viel mit CSS3 arbeite bin ich jetzt nicht sicher, wie sich in so einem fall eine Transition auswirkt, möglicherweise sieht es durch die Überlagerung der Bilder etwas komisch aus oder funktioniert gar nicht, müsste man ausprobieren.

    Gruss,
    -Lukas

    Edit: War wohl etwas zu langsam ;)

    Transitions beziehen sich auf Eigenschaftsänderungen: z.B. Rot nach Grün, durchsichtig nach undurchsichtig, Links nach Rechts usw. Also wird das hier nicht klappen.

    Stell dir vor es ist machbar, aber keiner kriegt's hin...

    CssApps.de