Question

我正在创建一个面向幻灯片的网站，类似于视差网站的运作方式，但到目前为止还没有js，只有css，显然没有延迟滚动，因为到目前为止没有js。

我正在处理前两张幻灯片。在第一张幻灯片上，我的标题和导航位于顶部，一个用于css效果的空白部分，使用渐变和透明度以及覆盖视口的图片。

在第二张幻灯片上，我有一个代表所有slide2的部分，其中包含一个覆盖视口的不同图片，以及一些由其自己的div标识并具有背景颜色和文本的文本。

这是问题所在。通过使用背景附件和背景位置：屏幕的左上角，高度：100％，我能够使背景颜色保持固定。宽度：15％;这样可以防止背景滚动，但这对文本没有任何作用。

我还需要禁止滚动文本，这样它在背景上的位置就不会改变。因此，不是文字滚动到背景上，而是更像是窗帘升起并露出下面的文字。

我已尝试过position：fixed，但这会破坏幻灯片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上的文字保留在背景附件：滚动过程中幻灯片2的固定部分没有弄乱幻灯片上的透明度影响并允许slide3在slide2上滚动？

Answer 1

所以我自己想出来了。有趣，答案是多么简单。我所做的就是在＆＃34; slide2Text＆＃34;中制作第二个容器。包含相同内联文本元素元素的容器，我将其标识为＆＃34; text，＆＃34;并使用css设置＆＃34; slide2Text＆＃34;和css的背景样式，以修复＆＃34;文本的文本位置。＆＃34;

我不确定我是否像我想的那样喜欢结果，但也许我可以使用一些javascript或css来使文本从隐形变为可见，因为幻灯片滚动到视图中。

如果有人想查看代码或者没有理解我的答案，请问我并发布。再次，这是一个简单的解决方案。

禁止滚动文本

1 个答案: