gpt4 book ai didi

css - Web 视差滚动背景图像和文本

转载 作者:行者123 更新时间:2023-11-28 10:18:04 25 4
gpt4 key购买 nike

问题的 fiddle : http://jsfiddle.net/Vy365/3/

我正在尝试在具有视差滚动效果的页面上创建部分。

我用来实现此目的的主要 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 窗口滚动监控?

最佳答案

认为您想在“.parallax .title”类上使用 position:absolute 而不是 position:fixed

关于css - Web 视差滚动背景图像和文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17819013/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com