Question

*根据各种反馈进行编辑*

我正在尝试在我的网页中实施Parallax effect，如http://pixelcog.github.io/parallax.js/

中所述

下面是我的HTML和CSS代码：

HTML

<!DOCTYPE html>
<html lang = "en">

<head>
    <link rel = "stylesheet" type = "text/css" href = "CSS.css">    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src = "Parallax/parallax.js"></script>


</head>



<body id='ground'>
  <div id='Main_Div'>
    <div id = 'Sub_Div1'>

    </div>

    <div class="parallax-window" data-parallax="scroll" data-image-src="https://upload.wikimedia.org/wikipedia/commons/1/17/Mytikas.jpg">
        <h3>Some Text</h3>
    </div>

    <div id = 'Sub_Div3'>

    </div>

  </div>
</body>

CSS代码

body {
  margin: 0 auto;
  width: 60%;
}

#Main_Div {
  height: 2600px;
  background: #FFFF00;
  padding: 30px 0;
}

#Sub_Div1 {
  height: 500px;
  background: #800000;
  padding: 30px 0;
}


#Sub_Div3 {
  height: 500px;
  background: #FFA500;
  padding: 30px 0;
}

.parallax-window {
    height: 400px;
    background: transparent;
}

但是上面的代码我无法达到预期的效果。

感谢有人能指出我的代码有任何改进。

谢谢，

滚动背景图片相对于HTML页面

0 个答案: