body
{
background-image:url(d:/bg.gif)
background-repeat:no-repeat
background-attachment:fixed
}
</style>
如何只是设置不平铺,可能会让背景图片随着页面文字滚动,所以还是要对背景图片设置fixed固定。
background-image,用它可以指定整个网页的背景图片(将它放在BODY标签内),也可以是某一个单词。background-repeat 是否循环背景
p {background-repeat:no-repeatbackground-image:url(background.gif)}/*不循环*/
p {background-repeat:repeatbackground-image:url(background.gif)}/*循环*/
background-attachment 是否固定背景
body {background-attachment:scrollbackground-image:url(background.gif)}/*随文字一起滚动*/
body {background-attachment:fixedbackground-image:url(background.gif)}/*固定不动*/
如下代码可以实现,先把两张背景图片换一下吧,一张是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>