Question

基本上我有两个div，一个背景为雪上房子的图像，第二个是纯白色背景。每个div占据页面宽度和高度的100％。

目标是，当滚动时，它将从图像中的雪到白色背景几乎自然消失。不幸的是，在积雪开始之前，图像会在房子处切断。如何使背景合适，以便与白色完美融合？这是html：

＆＃13;

<!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>

＆＃13;

这里是CSS：

＆＃13;

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;
}

＆＃13;

最后链接第一个div的背景图片： http://imgur.com/a/ytDul

我知道这可能是一个非正统的问题，但任何帮助都将受到赞赏。

Answer 1

要做到这一点，你需要使用javascript或jQuery，并创建一个过渡或动画效果。你可以谷歌或尝试使用codecademy.com来学习如何做到这一点。

使新div上的颜色褪色

1 个答案: