Machen Sie Farbe verblassen auf neue div

Grundsätzlich habe ich zwei divs, eine mit einem Hintergrund von einem Bild von Haus auf Schnee und die zweite einen einfachen weißen Hintergrund.Jedes div wird 100% Breite und Höhe der Seite aufnehmen.Machen Sie Farbe verblassen auf neue div

Das Ziel ist, dass beim Scrollen ein nahezu natürliches Ausbleichen vom Schnee im Bild auf den weißen Hintergrund erfolgt. Leider bricht das Bild im Haus ab, bevor der Schnee richtig startet. Wie kann ich den Hintergrund so anpassen, dass er gut mit dem Weiß harmoniert? Hier ist der html:

<!DOCTYPE html5> 
 
<html> 
 
    <head> 
 
     <link rel="stylesheet" type="text/css" href="theme.css"> 
 
    </head> 
 
    <body> 
 
    <div class="sec" id="one"> 
 
     <h1>hi</h1> 
 
    </div> 
 
    <div class="sec" id="two"> 
 
     <h2>Hello</h2> 
 
    </div> 
 
    </body> 
 
</html>

Hier ist die CSS:

html,body{ 
 
    margin: 0 auto; 
 
    height:100%; 
 
    width: 100%; 
 
} 
 
.sec{ 
 
    height: 100%; 
 
    width:100%; 
 
} 
 
#one{ 
 
background: url(images/white_back.jpg) no-repeat center center; 
 
-webkit-background-size: cover; 
 
-moz-background-size: cover; 
 
-o-background-size: cover; 
 
background-size: cover; 
 
} 
 
#two{ 
 
    background: white; 
 
}

und schließlich die Verbindung das Hintergrundbild für das erste div: http://imgur.com/a/ytDul

Ich weiß, dass dies eine unorthodoxe Frage sein kann, aber jede Hilfe wird geschätzt.

Quelle

2016-08-06 Fiach Oneill

das erfordert Javascript. Weißt du etwas über diese Sprache? Ich kann dir helfen, es zu tun, aber zuerst möchte ich dein Niveau wissen, um dir besser zu erklären/zu helfen. –

und besser zu verstehen, was Sie vorhaben zu tun. Erstelle einen Codepen um uns zu zeigen. –

-1

Um dies zu tun, müssen Sie Javascript oder wahrscheinlich jQuery verwenden und einen Übergangs- oder Animationseffekt erstellen. Sie können es googlen oder versuchen Sie codecademy.com, um zu lernen, wie man das macht.

Quelle

2016-08-06 01:15:42

Machen Sie Farbe verblassen auf neue div

Antwort

Verwandte Themen