如何用css设置网页背景固定不动

html-css075

如何用css设置网页背景固定不动,第1张

<style type="text/css">

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>