background-image transitionieren

[Rolf B]

Hallo Nico R.,

du kannst Transitionen auf Eigenschaften anwenden, die einen kontinuierlichen Wertebereich haben. Das sind zum einen Zahlen, und für Farben kriegt der Browser das auch hin.

Schlüsselworteigenschaften oder Bilder sind nicht kontinuierlich.

Eine Überblendung zwischen zwei Bildern geht nur per Transparenz, allerdings ist so etwas wie "background-opacity" nicht vorhanden.

Es mag Tricks geben, die ich nicht kenne; aber mein Ansatz wäre, das Element und zwei Divs übereinanderzustapeln und in den beiden Divs die beiden Hintergründe zu setzen. Diese beiden Divs können dann gegenläufig zwischen Transparent und Opak überblendet werden.

Wie man das genau tut, hängt von deiner Anforderung ab. Sehe ich das richtig, dass Du das Bild komplett umblenden willst, sobald man vom oberen Rand wegscrollt? Oder hängt der Grad der Überblendung von der Scrollposition ab? Was ist, wenn man zum oberen Rand zurückkehrt?

Rolf