Hintergrundfarbe als Seitenrolle ohne Abfrage ändern?

Ich versuche, einen Übergang zum Laufen zu bringen, so dass die Hintergrundfarbe je nach Position der Seite / d. H. In eine andere Farbe übergeht. Ausgelöst von Divs mit derselben Klasse. Fand einige js hier http: //codepen.io/Funsella/pen/yLfA) was genau so funktioniert, wie ich es auf dem Desktop will, aber es bricht auf dem iPad (egal im Browser).

Würde jemand wissen, wie man diesen Übergang mit CSS macht?

Ich fand, aber es ist durch einen Schwebeflug ausgelöst ..

Zum Beispiel..http: //jsfiddle.net/L9JXG/1

.div1 {
    height:200px;
    width:600px;
    position:relative;
    background:red;
}
.div1:after {
    position:absolute;
    width:100%;
    height:100%;
    content:'';
    background:url("http://lorempixel.com/output/business-q-c-640-480-10.jpg");
    background-size:cover;
    opacity:1;
    transition: 3s;
}
.div1:hover:after {
    opacity:0;
}

Antworten auf die Frage(2)

Ihre Antwort auf die Frage