【发布时间】：2014-10-06 18:07:20
【问题描述】：
我正在制作一个面向幻灯片的网站，类似于视差网站的运作方式，但到目前为止还没有 js，只有 css，而且显然没有延迟滚动，因为到目前为止还没有 js。
我正在制作前两张幻灯片。在第一张幻灯片上，顶部有我的标题和导航，一个空白部分，用于使用渐变和透明度的 css 效果以及覆盖视口的图片。
在第二张幻灯片上，我有一个部分代表整个 slide2，其中包含覆盖视口的不同图片，以及一些由其自己的 div 标识并具有背景颜色和文本的文本。
这就是问题所在。通过使用背景附件和背景位置：屏幕左上角，高度：100%；和宽度：15%；这可以防止背景滚动，但这对文本没有任何作用。
我还需要禁止滚动文本，这样它在背景上的位置就不会改变。因此，与其将文本滚动到背景上，它更像是一个窗帘升起并露出下面的文本。
我试过 position:fixed，但这破坏了幻灯片 1 上空白部分的透明度影响，并且由于某种原因忽略了我给它的任何 z-index 并保留在任何后续幻灯片的顶部（奇怪的是，它服从页眉的 z-index、空白部分和组成第一张幻灯片的 img）。
我可以用 css 做到这一点吗？我还不知道 js，但我正在学习它，而且我知道它经常用于滚动效果。所以如果唯一的解决办法是js，我不反对用它，就是atm看不懂。
这里是简化的代码：
HTML5
<html>
<head>
</head>
<body>
<div id="headerContainer">
<div id="containerRow">
<header id="home">
<a href="#home" title="Top"><img id="logo" src="images/logo/MASKAUTONOMY.png" alt="Logo" style="height:75px; margin:25px 0px 0px 25px; padding:0;"></a>
</header>
<nav>
<ul>
<li>
<a href="#home" title="Home">HOME</a>
</li>
<li>
<a href="#about" title="More Links">ABOUT</a>
</li>
<li>
</ul>
</nav>
</div><!--End containerRow-->
</div><!--End table headerContainer-->
<section class="ribbon">
</section><!--Section left blank to make ribbon with gradient affect-->
<Section class="slide1">
<h1>Company Slogan</h1>
</section>
<section id="about" class="slide2">
<div id="slide2Text">
<h1><span>Mask</span> Autonomy</h1>
<p class="companyInfo">Some stuff
</p>
<p> some more stuff.
</p>
</div><!--End of slide2Text-->
</section>
<section id="services" class="slide3">
<ul>
<li>List of things we do
</li>
<li>More things we do
</li>
</ul>
</section><!--End of slide3-->
</body>
</html>
css
body {
padding: 0px;
}
#headerContainer {
height: 10vh;
width: 100%;
margin: 0px;
padding: 0px;
display: table;
position: relative;
z-index: 999;
background-color: #e1e3e9;
}
header {
display: table-cell;
}
nav {
margin: 0px;
padding: 0px;
display: table-cell;
width: 100%;
text-align: right;
white-space: nowrap;
overflow: hidden;
}
nav ul li {
margin-right: 0px;
padding-right: 25px;
display: inline-block;
*display: inline;
*zoom: 1;
font-size: 1.2vw;
font-family: arial;
}
nav ul li:last-of-type {
margin-right: 47px;
padding: 0px;
}
.ribbon {
position: relative;
height: 4vh;
width: 100%;
background-color: #e1e3e9;
z-index: 998;
}
.slide1 {
color: #e0e0e0;
height: 86vh;
background-image: url(../../Documents/DOCS/Stycorp/Website/Images/bckgrnd.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
overflow-x: hidden;
margin-bottom: 0px;
padding: 0px;
position: relative;
z-index: 997;
}
.slide1 h1 {
position: relative;
top: 60%;
left: 47px;
font-size: 4vh;
}
.slide2 {
position: relative;
height: 100vh;
background: url(images/Charlotte.jpg) no-repeat center center fixed;
background-size: cover;
z-index: 989;
}
#slide2Text {
position: static;
background-color: #7d8e9e;
background-attachment: fixed;
background-position: left top;
height: 100%;
width: 15%;
text-align: center;
font-size: 2.33vh;
}
#slide2Text h1 {
position: relative;
top: 2.5%;
font-weight: normal;
text-transform: uppercase;
}
#slide2Text span {
color: #a9aba5;
font-weight: normal;
text-transform: uppercase;
}
.companyInfo {
color: #e0e0e0;
}
.slide3 {
position: relative;
z-index: 994;
height: 100vh;
}
好吧，也许不是那么缩写。对不起。任何想法如何让第二张幻灯片上的文本保留在背景附件上：在滚动期间固定第二张幻灯片的部分，而不会弄乱第一张幻灯片的透明度影响并允许幻灯片 3 在幻灯片 2 上方滚动？
【问题讨论】：
标签： javascript css text position scroll