代码如下，直接拷贝出去就能看效果；
用到的方法
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.container{
100%; height: 100%;
position: relative;
z-index: 1;
}
.bd_index{
position: relative;
z-index: 1;
100%; height: 600px;
background: url(lib/banner.jpg) no-repeat center center;
background-size: cover;
background-attachment: fixed;
}
.neirong{
1200px; height: 600px;
margin: 0 auto;
font-size: 22px;
color: #fff;
box-sizing: border-box;
padding: 100px 0;
text-align: center;
}
.index_two{
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;
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>