代碼如下，直接拷貝出去就能看效果；
用到的方法
background-attachment 屬性設置背景圖像是否固定或者隨着頁面的其余部分滾動。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.container{
width: 100%; height: 100%;
position: relative;
z-index: 1;
}
.bd_index{
position: relative;
z-index: 1;
width: 100%; height: 600px;
background: url(lib/banner.jpg) no-repeat center center;
background-size: cover;
background-attachment: fixed;
}
.neirong{
width: 1200px; height: 600px;
margin: 0 auto;
font-size: 22px;
color: #fff;
box-sizing: border-box;
padding: 100px 0;
text-align: center;
}
.index_two{
width: 100%; min-height: 400px;
background: url(lib/bg_01.jpg) no-repeat center center;
/* 背景圖高度1200px 比較高的背景圖才行 */
position: relative;
background-size: cover;
z-index: 1;
background-attachment: fixed;
}
.wenzi{
height: 600px;
width: 100%;
background: #FFF;
position: relative;
z-index: 2;
font-size: 22px;
color: #333;
box-sizing: border-box;
padding: 100px 0;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<!-- 效果一 -->
<div class="bd_index one">
<div class="neirong">都是發了好感動鹵肉飯光華路；<br>是淡飯黃齏</div>
</div>
<!-- 效果二 -->
<div class="wenzi">
都是發了好感動鹵肉飯光華路；<br>是淡飯黃齏
</div>
<div class="index_two">
</div>
<div class="wenzi">
都是發了好感動鹵肉飯光華路；<br>是淡飯黃齏
</div>
</div>
</body>
</html>