滚动时如何使文本保持与背景图像固定？

Question

我有一个着陆页，其中包含我的网站标题，子标题和按钮。我使用background-attachment修复了背景图像，以便在向上滚动时保持原位。

我希望我的标题，子标题和按钮保持原位，以便概述部分重叠。我尝试将文本设置为固定位置并制作z-index: -1，但它会在背景图像后面显示并显示在概述部分中。 https://codepen.io/anon/pen/qmdzzz

文本包含在intro-text div

中

@media (min-width: 768px){
  header .intro-text {
    padding-top: 300px;
    padding-bottom: 200px;
    position: fixed;
    z-index: -1
  }
}

然后我尝试为概述部分设置更高的z-index

#overview {
  z-index: 1000; 
}

Answer 1

您需要建立#overview的相对位置。并设置背景颜色。这意味着。

#overview {background-color: #fff;position: relative}

从标题.intro-text中删除z-index：-1 我也为你创造了一支笔。你可以看看那里。

http://codepen.io/bizedkhan/pen/eWpOaW

Answer 2

您的 .intro-text 类必须具有属性：

position:fixed

为了与背景图像保持一致。