使内容在h1视差上滑动。 z-index不适用

时间:2016-04-09 00:51:18

标签: javascript html css z-index parallax

我试图制作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 {       text-align:center;       宽度:75%;       位置:固定;       左:50%;       margin-left:-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;
}

2 个答案:

答案 0 :(得分:2)

[Integer|String] = binary_to_list(BinaryReceived).

<强> jsBin demo

答案 1 :(得分:2)

背景颜色应与图像完全相同。

&#13;
&#13;
Start_Date        End_Date
 12/04/2013       12/03/2014
 07/16/2012       07/15/2013
 03/05/1999       03/04/2000
&#13;
from datetime import timedelta
df['END_DATE'] = df['START_DATE'] + timedelta(days=365)
&#13;
&#13;
&#13;