问题描述: http://jsfiddle.net/Vy365/3/
我正在尝试在页面上创建具有视差滚动效果的部分。
我使用的主要CSS是将背景图像设置为
页面上有多个带有此效果的div,并且我希望每个部分都覆盖前面的部分。 HTML:
背景图片可以适当地覆盖在一起,但是固定文本仍然停留在页面上(再次参见fiddle)。
有没有用CSS修复这个问题的方法?还是我必须使用一些讨厌的jQuery窗口滚动监视?
我使用的主要CSS是将背景图像设置为
background-attachment: fixed
,并将文本设置为position: fixed
。页面上有多个带有此效果的div,并且我希望每个部分都覆盖前面的部分。 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:
.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;
}
背景图片可以适当地覆盖在一起,但是固定文本仍然停留在页面上(再次参见fiddle)。
有没有用CSS修复这个问题的方法?还是我必须使用一些讨厌的jQuery窗口滚动监视?