0
我正在製作一個以幻燈片爲導向的網站，類似於視差網站的運作方式，但至今沒有js，只是css，顯然沒有延遲滾動，因爲目前爲止沒有js。禁止滾動文字
我正在製作前兩張幻燈片。在第一張幻燈片上，我的頭部和導航欄位於頂部，空白部分用於使用漸變和透明度的css以及覆蓋視口的圖片。
在第二張幻燈片上，我有一個代表所有slide2的部分，其中包含覆蓋視口的不同圖片以及由其自己的div標識並具有背景顏色和文本的一些文本。
這是問題所在。通過使用背景附件和背景位置：屏幕左上角，高度：100％，我能夠使背景色保持不變。和寬度：15％;這使滾動的背景，但這對文本沒有任何作用。
我需要禁止滾動文字，以便它在背景上的位置不會改變。所以，而不是滾動到背景上的文字，它更像是一個升起的窗簾，揭示下面的文字。
我試過位置：固定的，但這遺棄幻燈片1上的空白部分的透明度影響，並由於某種原因忽略任何z-index我給它，並保持在任何後續幻燈片之上（奇怪的是，它服從標題的z-index，空白部分和組成幻燈片的img）。
我可以用css做這個嗎？我還不知道js，但我正在學習它，並且我知道它經常用於滾動效果。所以如果唯一的解決方案是JS，我不反對使用它，我只是不會理解它。
下面是簡化的代碼：
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;
}
好吧，也許不是縮寫。抱歉。任何想法如何讓第二張幻燈片上的文字留在背景上 - 附件：在滾動過程中幻燈片2的固定部分沒有搞亂幻燈片的幻燈片效果，並允許幻燈片3在幻燈片2上滾動？