如何保持背景在固定的地方，滚动 [英] How to keep background in fixed place while scrolling
本文介绍了如何保持背景在固定的地方，滚动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这里是css
#bigwrapper {
background-image：url（'http：// www .w8themes.com / wp-content / uploads / 2013/09 / Water-Backgrounds.jpg'）;
background-repeat：no-repeat;
background-position：fixed;
width：100％;
}
这里是html
< body id =bigwrapper> ...< / body>
当向下滚动时，我想要能够保持背景图像在同一个地方。我做了这与我的标题，它的工作，但没有工作的背景图像。
.header1 {
position：fixed;
width：100％;
margin：-100px auto;
border：1px solid blue;
width：1300px;
margin-left：-8px;
background：rgba（107，168，237，.8）;
background-position：center;
opacity：0.7;
}
html下面
< div id =titleclass =header1>
< header>< h1 =title1class =allTitle>水工程< / h1>< / header>
< / div>
解决方案
使用此样式：
#bigwrapper {
background-image：url（'http://www.w8themes.com/wp-content/uploads/2013/09 /Water-Backgrounds.jpg'）;
background-repeat：no-repeat;
background-position：top center;
background-attachment：fixed;
width：100％;
}
您必须使用 background-attachment：fixed; 。
Here is the css
#bigwrapper{
background-image: url('http://www.w8themes.com/wp-content/uploads/2013/09/Water-Backgrounds.jpg');
background-repeat: no-repeat;
background-position: fixed;
width: 100%;
}
Here is the html
<body id="bigwrapper">...</body>
As i scroll down i want to be able to keep the background image in the same place. I did this with my header and it worked, but hasn't worked out for the background image. Here is how i did it with my header
css below
.header1{
position: fixed;
width: 100%;
margin: -100px auto;
border: 1px solid blue;
width: 1300px;
margin-left: -8px;
background: rgba(107, 168, 237, .8);
background-position: center;
opacity: 0.7;
}
html below
<div id="title" class="header1">
<header><h1 ="title1" class="allTitle">The Water Project</h1></header>
</div>
解决方案
Use this style:
#bigwrapper {
background-image: url('http://www.w8themes.com/wp-content/uploads/2013/09/Water-Backgrounds.jpg');
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
width: 100%;
}
You have to use background-attachment: fixed;.
这篇关于如何保持背景在固定的地方，滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
