1、在test.html文件中，创建多个p标签，让页面产生滚动条。
2、在css样式中，使用background-image属性设置页面的背景图片为2.jpg，将background-repeat属性设置为no-repeat，让背景图片不重复显示。
3、在css样式中，再将background-attachment属性设置为fixed，实现当页面滚动时，背景图片在页面中固定不动。
4、在浏览器打开test.html文件，向下滚动页面，查看结果。
如下代码可以实现，先把两张背景图片换一下吧，一张是11.jpg，一张是22.jpg，换完后拖动滚动条试一下吧：
<html style="height:100%margin:0px"><head>
<script>
window.onload = function(){
document.body.style.background = "url(11.jpg)" //这里换图片
var divBox = document.getElementById("divBox")
var isT = true
divBox.onscroll = function(){
var t = divBox.scrollTop
if(t >= 300 && isT){
isT = false
document.body.style.background = "url(22.jpg)" //这里换图片
}
else if(t<300 && !isT){
isT = true
document.body.style.background = "url(11.jpg)" //这里换图片
}
}
}
</script>
</head>
<body style="height:100%margin:0px">
<div id="divBox" style="width:100%height:100%overflow-y:scroll">
<div style="width:100%height:2000px">
</div>
</div>
</body>
</html>
