使新顏色淡入淡出

基本上我有兩個div，一個是房子在雪地上的圖像背景，第二個是純白色背景。每個div將佔用頁面寬度和高度的100％。使新顏色淡入淡出

這個目標是，當滾動它將有一個從圖像中的雪到白色背景幾乎自然的淡入淡出。不幸的是，在積雪開始之前，圖像在房子裏被切斷了。我怎樣才能使背景適合，以便它與白色融爲一體？這裏的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>

這裏的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; 
 
}

最後的鏈接第一個div的背景圖像： http://imgur.com/a/ytDul

我知道這可能是一個非正統的問題，但任何幫助將不勝感激。

來源

2016-08-06 Fiach Oneill

這將需要JavaScript。你對這種語言有什麼瞭解嗎？我可以幫你做到這一點，但首先我想知道你的水平，以更好地解釋/幫助你。 –

並更好地瞭解你打算做什麼。創建一個codepen向我們展示。 –

-1

要做到這一點，你需要使用JavaScript或可能jQuery，並創建一個過渡或動畫效果。你可以谷歌它或嘗試codecademy.com學習如何做到這一點。

來源

2016-08-06 01:15:42

使新顏色淡入淡出

回答

相關問題