Das Bild übernimmt die Funktion mehrerer Hintergründe.
Entsprechend der background-position:-Angabe im CSS kann man es herauf- oder herunterschieben, so bekommt man je nach Position die entsprechende Farbe.
Das gibt es auch bei anderen Grafiken, z.Bsp. die Button für + und -, die Icons für "Aktualisieren" im Warenkorb usw.
Dadurch wird es möglich, nur über eine CSS-Angabe dieses Bild zu verschieben.
Ich hab für diesen Zweck oft linear-gradient als Hintergrund verwendet.
Zum Beispiel sowas:
input.button {border: 1px solid #777;border-radius: 6px;box-shadow: 1px 1px 1px #555;background-image: linear-gradient(to top, #FFFFFF 0%, #28C 100%);}
input.button:hover {border: 1px solid #111;border-radius: 6px;box-shadow: 1px 1px 1px #333;background-image: linear-gradient(to top, #00ffff 0%, #28C 100%);}
Damit hat man einen Farbverlauf im Hintergrund, der sich bei Maus über dem Button verändert. Kann man hier sehen:
http://shop.duckflight.de/inde…asse-fluglust-detail.html
Zugang über Benutzer: Test, Passwort: testtest.
So long
Stefan