CSS Web 视差滚动背景图像和文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17819013/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Web Parallax Scrolling Background Image and Text
提问by dougmacklin
Fiddle of the issue: http://jsfiddle.net/Vy365/3/
问题的小提琴：http: //jsfiddle.net/Vy365/3/
I'm trying to create sections on a page that have a parallax scrolling effect.
我正在尝试在具有视差滚动效果的页面上创建部分。
The main CSS I'm using to achieve this is background-attachment: fixedfor the background image, and position: fixedfor the text on top of the image.
我用来实现这一点的主要 CSS 是background-attachment: fixed用于背景图像和图像position: fixed顶部的文本。
I have multiple div's with this effect on the page, and I want each section to cover up those that come before it.
我在页面上有多个具有这种效果的 div，我希望每个部分都覆盖它之前的那些。
HTML:
HTML：
<section>
<div id="parallax-1" class="parallax">
<div class="title">
<h1>Fixed Text 1</h1>
</div>
</div>
</section>
<section class="scrolling-content">Scrolling Content</section>
<section>
<div id="parallax-2" class="parallax">
<div class="title">
<h1>Second Fixed Text</h1>
</div>
</div>
</section>
<section class="scrolling-content">Scrolling Content</section>
CSS:
CSS：
.parallax {
margin: 0 auto;
padding: 0;
position: relative;
width: 100%;
max-width: 1920px;
height: 200px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 0;
z-index: 1;
}
.parallax .title {
position: fixed;
top: 80px;
}
#parallax-1 {
background-image: url(http://placekitten.com/500/200);
}
#parallax-2 {
background-image: url(http://placekitten.com/500/202);
}
.scrolling-content {
position: relative;
width: 100%;
height: 200px;
background: #ffffff;
z-index: 2;
}
The background images cover up one another appropriately, however the fixed text remains fixed on the page (once again, see the fiddle).
背景图像适当地相互覆盖，但固定文本仍然固定在页面上（再一次，请参阅小提琴）。
Is there any way to fix this with CSS? Or do I have to do some yucky jquery window scroll monitoring?
有没有办法用 CSS 解决这个问题？或者我必须做一些令人讨厌的 jquery 窗口滚动监控吗？
回答by Nagra
Think you want to use position:absolute instead of position:fixed on your '.parallax .title' class
认为你想使用 position:absolute 而不是 position:fixed 在你的 '.parallax .title' 类
回答by Ihatetomatoes
Here are two tutorials (both using Skrollr.js) which might help others trying to create a similar parallax scrolling effect.
这里有两个教程（都使用 Skrollr.js），它们可能会帮助其他人尝试创建类似的视差滚动效果。
回答by Sablefoste
Since you are using jQuery anyway, why don't you try a plug in like http://stephband.info/jparallax/?
既然你在使用 jQuery，为什么不试试像http://stephband.info/jparallax/这样的插件呢？
EDIT: For mobile apps, you may want to check out Skrollr. It is pure Javascript, and there are some really good examples in the "In the wild" section.
编辑：对于移动应用程序，您可能需要查看Skrollr。它是纯 Javascript，在“In the wild”部分有一些非常好的例子。
It can help you from re-inventing the wheel.
它可以帮助您重新发明轮子。
