javascript - 使内容滑过 h1 视差。 z-index 不适用

Question

我试图让 h1 标签“投资组合”在用户向下滚动时消失在下一部分下方(只是一束紫色)。

我尝试让 h1 文本的 z-index 为 -1，但这会使文本消失在背景图像下方。

如果我为应该滑过文本顶部的内容设置更高的 z-index，h1“Portfolio”仍然在顶部。如何在文本“Portfolio”上创建视差效果？ http://codepen.io/anon/pen/QNaoyO

如果背景不是图像而是颜色，如果您能获得相同的效果，则可加分。我目前只有一张颜色的图片作为背景。

HTML

<div id="portfolio"><h1 id="portfolioTitle">Portfolio</h1></div>

<section class="mainContent" style="height: 600px; background-color: purple;"></div>

CSS #portfolioTitle { 文本对齐:居中； 宽度:75%； 位置:固定； 左:50%； 左边距:-37.5%； /z-index: -1//让它消失/

.mainContent {
  z-index: 10;
}

#portfolio {
  /*background-color: #27f5eb;*/
  /*background-color: #DD67F5;*/
  background-image: url(https://www.startupinacar.com/wp-content/uploads/2016/04/blackjackPic.png);
  height: 300px;
  /*position: fixed;*/
  background-attachment: fixed;
  width: 100%;
  z-index: 10;
}

Answer 1

背景颜色应该与图像一样。

#portfolio {
  height: 300px;
  position: fixed;
  z-index: 1;
  background: #27f5eb;
  top: 0;
  width: 100%;
}

.mainContent {
  z-index: 2;
  position: relative;
  z-index: 2;
  height: 1000px; 
  background: purple;
  margin-top: 300px;
}

h1 {
  text-align: center;
}

body {margin: 0; padding: 0;}

<div id="portfolio">
    <h1>Portfolio</h1>
</div>

<section class="mainContent">
</div>