我正在制作一个面向幻灯片的网站，类似于视差网站的运作方式，但到目前为止还没有 js，只有 css，而且显然没有延迟滚动，因为到目前为止还没有 js。
我正在制作前两张幻灯片。在第一张幻灯片上，我的标题和导航位于顶部，一个空白部分用于影响使用渐变和透明度的 css 以及覆盖视口(viewport)的图片。
在第二张幻灯片上，我有一个代表所有 slide2 的部分，其中包含覆盖视口(viewport)的不同图片，以及一些由其自己的 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;
}
好吧，也许没那么缩写。对不起。有什么想法可以让第二张幻灯片上的文本保留在背景附件中:滚动期间幻灯片 2 的固定部分不会弄乱对第一张幻灯片的透明度影响并允许幻灯片 3 在幻灯片 2 上方滚动吗？
最佳答案
所以我自己想通了。有趣的是，答案是多么简单。我所做的只是在包含相同内联文本元素元素的“slide2Text”容器中创建第二个容器，我将其标识为“文本”，并使用 css 设置“slide2Text”背景的样式，并使用 css 固定文本位置的“文本”。
我不确定我是否像我想的那样喜欢这个结果，但也许我可以使用一些 javascript 或 css 在幻灯片滚动到 View 中时使文本从不可见过渡到可见。
如果有人想看代码或者不明白我的回答，尽管问，我会贴出来。同样，这是一个简单的修复。
关于javascript - 禁止滚动文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26222137/